Css3中如何实现hover动画的颜色动画效果

这篇文章主要为大家展示了“css3中如何实现hover动画的颜色动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3中如何实现hover动画的颜色动画效果”这篇文章吧。

颜色动画效果主要是利用:before和:after进行实现的，所以，大家如果使用的时候，切记:before和:after没有被占用，否则会显示不正常。

1.颜色块变化

html

<span class="ech-fade">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 class="ech-overline-l">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 class="ech-arrow-l">arrow-l</span><span class="ech-arrow-r">arrow-r</span><span class="ech-arrow-t">arrow-t</span><span class="ech-arrow-b">arrow-b</span><span class="ech-arrow-l-move">arrow-l</span><span class="ech-arrow-r-move">arrow-r</span><span class="ech-arrow-t-move">arrow-t</span><span class="ech-arrow-b-move">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;

以上是“Css3中如何实现hover动画的颜色动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！