这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效，当鼠标放在按钮上，按钮就会发生变化，产生一个动态效果，非常漂亮。需要的朋友可以参考下
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板
WIFEO
登录后复制
css3代码：
立即学习“前端免费学习笔记（深入）”；
CSS Code复制内容到剪贴板
.contener { width: 300px; height: 60px; background-color: #00bcd4; line-height: 60px; color: #ffffff; font-weight: 300; font-family: 'Roboto'; font-size: 25px; position: relative; overflow: hidden; cursor: pointer; box-shadow:1px 1px 1px #333333; } .txt_button { position: absolute; width: 100%; } .contener:hover .circle{ -webkit-animation:oblik 0.4s ease-in; -webkit-transform-origin: 50% 50%; -moz-animation:oblik 0.4s ease-in; -moz-transform-origin: 50% 50%; -ms-animation:oblik 0.4s ease-in; -ms-transform-origin: 50% 50%; animation:oblik 0.4s ease-in; transform-origin: 50% 50%; width: 100px; height: 100px; border-radius: 50%; } @-webkit-keyframes oblik { 0% {opacity:1;-webkit-transform:scale(0);} 100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;} } @-moz-keyframes oblik { 0% {opacity:1;-moz-transform:scale(0);} 100% {opacity:0;-moz-transform:scale(5);background-color: #006064;} } @-ms-keyframes oblik { 0% {opacity:1;-ms-transform:scale(0);} 100% {opacity:0;-ms-transform:scale(5);background-color: #006064;} } @keyframes oblik { 0% {opacity:1;transform:scale(0);} 100% {opacity:0;transform:scale(5);background-color: #006064;} }
登录后复制
【相关推荐】
1. CSS3免费视频教程
2. 关于CSS3中选择符的实例详解
3. 关于CSS3中的content属性实例详解
4. 详解CSS3中10个顶级命令
5. 简述网页设计师怎么使用好CSS3技术
以上就是css3制作鼠标经过按钮特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2902616.html
