一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1465字，纯文字阅读大概需要3分钟。

内容图文

在线预览 源码下载

实现的代码。

html代码：

 
        
            
                WIFEO
            
                 
        
    

css3代码：

  .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;}   }

内容总结

以上是互联网集市为您收集整理的一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose全部内容，希望文章能够帮你解决一款纯css3实现的鼠标经过按钮特效_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端