Css3中hover动画的颜色动画怎么使用
程序员文章站
2022-03-27 12:31:45
...
我们知道,在CSS里实现颜色动画的效果主要是利用: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;
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是Css3中hover动画的颜色动画怎么使用的详细内容,更多请关注其它相关文章!
上一篇: php 正则表达式示例
下一篇: PAM认证模块