这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效,当鼠标放在按钮上,按钮就会发生变化,产生一个动态效果,非常漂亮。需要的朋友可以参考下
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单,但效果很好,非常漂亮。一起看下效果图:
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<p align="center"> <p class="contener"> <p class="txt_button"> WIFEO</p> <p class="circle"> </p> </p> </p>
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免费视频教程
以上是css3制作鼠标经过按钮特效的详细内容。更多信息请关注PHP中文网其他相关文章!