CSS3에서 호버 애니메이션의 컬러 애니메이션을 사용하는 방법

CSS에서 색상 animation 효과는 주로 :before 및 :after을 사용하여 얻는다는 것을 알고 있습니다. 오늘은 CSS3에서 hover 애니메이션의 색상 애니메이션을 사용하는 방법을 소개하겠습니다.

1. 컬러 블록 변경

html
<span>fade</span>
css
/当前元素设置相对定位/.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l { position: relative; transition: all .3s; z-index: 1;

2. 컬러 상단 및 하단 라인 변경

html
<span>overline-l</span>
css
/上划线和下划线变化 当前元素样式设置相对定位/.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{ position: relative; transition: all .3s; z-index: 1;

3 화살표 애니메이션

html
<span>arrow-l</span><span>arrow-r</span><span>arrow-t</span><span>arrow-b</span><span>arrow-l</span><span>arrow-r</span><span>arrow-t</span><span>arrow-b</span>
css
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{ position: relative; transition: all .3s; z-index: 1;

이 사례를 읽으신 후에는 방법을 마스터하신 것 같습니다. 더 흥미로운 내용을 보려면 다른 관련 내용을 주목하시기 바랍니다. PHP 중국어 웹사이트의 기사!

관련 읽기:

Css3에서 변환 그라디언트 속성을 사용하는 방법

Css3에서 동적 스위치 생성 효과를 구현하는 단계

CSS에서 상자 모델 유형 간의 차이점

위 내용은 CSS3에서 호버 애니메이션의 컬러 애니메이션을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!