这篇文章主要为大家介绍了利用css3制作的一款鼠标经过按钮特效，当鼠标放在按钮上，按钮就会发生变化，产生一个动态效果，非常漂亮。需要的朋友可以参考下
今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板
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中文网其他相关文章！
