永康市环宇昂泰工贸有限公司

今天小编跟大家讲解下有关一款纯css3实现的鼠标经过按钮特效教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一款纯css3实现的鼠标经过按钮特效教程 的相关资料，希望小伙伴们看了有所帮助。

　　今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单 但效果很好 非常漂亮。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板 <divalign="center"> <divclass="contener"> <divclass="txt_button"> WIFEO</div> <divclass="circle"> </div> </div> </div>

　　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:1px1px1px#333333; } .txt_button { position:absolute; width:100%; } .contener:hover.circle { -webkit-animation:oblik0.4sease-in; -webkit-transform-origin:50%50%; -moz-animation:oblik0.4sease-in; -moz-transform-origin:50%50%; -ms-animation:oblik0.4sease-in; -ms-transform-origin:50%50%; animation:oblik0.4sease-in; transform-origin:50%50%; width:100px; height:100px; border-radius:50%; } @-webkit-keyframesoblik{ 0%{opacity:1;-webkit-transform:scale(0);} 100%{opacity:0;-webkit-transform:scale(5);background-color:#006064;} } @-moz-keyframesoblik{ 0%{opacity:1;-moz-transform:scale(0);} 100%{opacity:0;-moz-transform:scale(5);background-color:#006064;} } @-ms-keyframesoblik{ 0%{opacity:1;-ms-transform:scale(0);} 100%{opacity:0;-ms-transform:scale(5);background-color:#006064;} } @keyframesoblik{ 0%{opacity:1;transform:scale(0);} 100%{opacity:0;transform:scale(5);background-color:#006064;} }

　　以上就是今天带给大家的一款纯css3实现的鼠标经过按钮特效 谢谢阅读 希望能帮到大家 请继续关注AIDI 我们会努力分享更多优秀的文章。

来源：爱蒂网