>  기사  >  웹 프론트엔드  >  CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

little bottle
little bottle원래의
2019-04-29 09:45:452780검색

CSS는 특수 효과를 얻기 위해 복잡할 필요가 없습니다. 다음은 몇 줄의 코드만으로 웹 애플리케이션에 많은 것을 추가할 수 있는 매우 간단한 전환의 세 가지 예입니다.

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

이 튜토리얼에서 빌드할 코드는 다음과 같습니다

프로젝트 설정

이 프로젝트에서는 클래스 상자가 있는 요소에 전환 효과를 적용해 보겠습니다. 이 상자 요소 안에는 수직 및 수평 중앙에 텍스트 콘텐츠가 있습니다. HTML 구조는 매우 간단합니다.

<div class=&#39;box&#39;>
  <p>TEXT</p>
</div>

CSS 코드도 마찬가지로 간단합니다. 산세리프 글꼴을 사용하고 div의 단락 텍스트가 흰색인지 확인하려고 합니다.

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

또한 상자 요소에 다음 CSS 속성을 추가합니다.

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

CSS 전환 속성은 익숙하거나 익숙하지 않습니다. 여기서는 세 단계로 나누어 간략하게 소개하겠습니다. .첫 번째 단계에서는 변경된 모든 속성에 이를 적용해야 합니다. 다음으로 전환 기간을 0.25초로 설정합니다. 마지막으로 애니메이션 기능을 쉽게 선택하세요. 성능의 용이함 상태는 시작과 끝 과정이 상대적으로 느리고 중간의 전환이 빠른 것입니다.

holly high! 이제 준비가 완료되었으므로 다음 단계는 전환 효과를 추가하는 것입니다. 지금까지 div는 다음과 같아야 합니다.

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

1. 페이드 효과

먼저 페이드 전환을 추가합니다. 새 div 요소를 만들고 fade라는 클래스를 추가합니다.

<div class=&#39;box fade&#39;>
  <p>FADE HERE</p>
</div>

다음으로 해야 할 일은 이 페이드 클래스에 대한 호버 규칙을 지정하는 것입니다. 이를 수행하려면 CSS 가상 클래스 선택기:호버를 사용해야 합니다. 이 의사 선택기는 모든 요소에 유효하며 요소 위에 마우스를 올리면 CSS 선언이 활성화됩니다. 이를 바탕으로 :hover 선택기를 사용하여 div의 투명도를 0.5로 변경합니다:

.fade:hover {
  opacity: 0.5;
}

Simple. 위의 CSS 문은 div에 대한 호버 효과를 지정합니다. 현재 모습은 다음과 같습니다. 전환 스타일을 볼 수 있는 이유는 처음에 box라는 클래스에서 전환 선언을 사용했기 때문입니다. 아래를 보세요. 꽤 좋은 페이딩 효과인가요?

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

2. 몇 가지 색상을 살펴보겠습니다.

색상 전환을 지정하는 것은 실제로 페이드 전환과 동일한 과정입니다. 먼저 div 요소를 만들고 여기에 color라는 클래스를 추가합니다.

<div class=&#39;box color&#39;>
  <p>COLOR HERE</p>
</div>

마찬가지로 이 작업을 수행하려면 :hover 선택기를 사용해야 하지만 이번에는 투명도를 변경하지 않고 배경색을 변경합니다.

.color:hover {
  background: #FF5722;
}

다음은 실제 효과입니다.

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

3.Sway together

다음으로 흔들리는 효과를 만들어 보겠습니다. 이 효과는 이전 두 예제보다 구현하기가 약간 더 복잡합니다. 이 예에서는 @keyframes를 사용하겠습니다.

@keyframes - CSS 애니메이션 시퀀스의 중간 단계를 제어하는 ​​마법을 제공합니다.

첫 번째는 여전히 똑같습니다. 이 말을 듣는 것이 지겹겠군요. div 요소를 만들고 거기에 wiggle이라는 클래스를 추가하세요.

<div class=&#39;box wiggle&#39;>
  <p>WIGGLE WIGGLE</p>
</div>

다음으로 우리가 해야 할 일은 @의 도움으로 애니메이션을 만드는 것입니다. 키프레임. 먼저 애니메이션에 이름을 지정하고 wiggle이라고 부르겠습니다. 그리고 다음 코드에 지터 효과 구현을 추가하세요.

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

위 코드에서 볼 수 있듯이 @keyframes는 애니메이션을 단일 단계로 나누고 각 단계에서 발생하는 일을 정확하게 정의하는 기능을 제공합니다. 애니메이션 진행률을 백분율로 지정합니다:

20% - div가 초기 위치를 기준으로 오른쪽으로 4px 이동합니다.

40% - div를 초기 위치를 기준으로 왼쪽으로 4px 이동합니다.

60% - div가 초기 위치를 기준으로 오른쪽으로 2픽셀 이동됩니다.

80% - div를 초기 위치를 기준으로 1px 왼쪽으로 이동합니다.

100% - div가 원래 위치로 복원됩니다.

이제 :hover 선택기를 사용하여 흔들기 애니메이션을 표시할 수 있습니다.

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

애니메이션을 흔들기로 설정했습니다. 동시에 애니메이션이 1초 동안 지속되도록 하고 이즈 애니메이션 효과를 사용하고 싶습니다.

마지막으로 마우스 포인터가 움직일 때마다 실행될 애니메이션을 지정합니다.

아래 사진은 최종 애니메이션 효과입니다.

CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)

위 내용은 CSS를 사용하여 호버 전환 애니메이션 프로젝트 완료(매우 간단함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.