简要教程
这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果，均由按钮的伪元素和CSS3 animation来制作完成。
查看演示 下载插件
使用方法
立即学习“前端免费学习笔记（深入）”；
HTML结构
该效果通过超链接来制作按钮，例如第一种Swipe效果的HTML代码为：
CSS样式
为了方便，特效中为除了、、、和之外的所有元素都添加了动画过渡效果。
html *,html *:before,html *:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s;}html i, html em,html b, html strong,html span { -webkit-transition: none; transition: none;}
然后为按钮设置通用样式。
a { text-decoration: none; line-height: 80px; color: black;}[class^="btn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor;}
在第一个DEMO中，通过按钮的:before伪元素来制作深紫色的滑块。滑块采用绝对定位，位于按钮的左侧位置，开始时它的宽度为0.
.btn-0 { color: #9a3789;}.btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #520c46;}
在鼠标滑过按钮时，按钮的字体颜色过渡为白色，:before伪元素的宽度有0变化为100%。
.btn-0:hover { color: #e1c4dc;}.btn-0:hover:before { width: 250px;}
在用户点击按钮时，再为按钮的背景色变换一种较浅的紫色。
.btn-0:active { background: #881474;}
以上就是基于CSS3 animation的鼠标滑过按钮特效的实例详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608851.html
微信扫一扫 
支付宝扫一扫 
