CSS는 특수 효과를 얻기 위해 복잡할 필요가 없습니다. 다음은 몇 줄의 코드만으로 웹 애플리케이션에 많은 것을 추가할 수 있는 매우 간단한 전환의 세 가지 예입니다.
이 튜토리얼에서 빌드할 코드는 다음과 같습니다
프로젝트 설정
이 프로젝트에서는 클래스 상자가 있는 요소에 전환 효과를 적용해 보겠습니다. 이 상자 요소 안에는 수직 및 수평 중앙에 텍스트 콘텐츠가 있습니다. HTML 구조는 매우 간단합니다.
<div class='box'> <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='box fade'> <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='box color'> <p>COLOR HERE</p> </div>
마찬가지로 이 작업을 수행하려면 :hover 선택기를 사용해야 하지만 이번에는 투명도를 변경하지 않고 배경색을 변경합니다.
.color:hover { background: #FF5722; }
다음은 실제 효과입니다.
3.Sway together
다음으로 흔들리는 효과를 만들어 보겠습니다. 이 효과는 이전 두 예제보다 구현하기가 약간 더 복잡합니다. 이 예에서는 @keyframes를 사용하겠습니다.
@keyframes - CSS 애니메이션 시퀀스의 중간 단계를 제어하는 마법을 제공합니다.
첫 번째는 여전히 똑같습니다. 이 말을 듣는 것이 지겹겠군요. div 요소를 만들고 거기에 wiggle이라는 클래스를 추가하세요.
<div class='box wiggle'> <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!