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는 다음과 같아야 합니다.

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라는 클래스에서 전환 선언을 사용했기 때문입니다. 아래를 보세요. 꽤 좋은 페이딩 효과인가요?

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

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

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

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

.color:hover {
  background: #FF5722;
}

다음은 실제 효과입니다.

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