今天再给大家带来一款纯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实现的鼠标经过按钮特效，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。
【一款纯css3实现的鼠标经过按钮特效教程】相关文章：