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