这篇文章主要为大家介绍了利用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免费视频教程
2. 关于css3中选择符的实例详解
3. 关于css3中的content属性实例详解
4. 详解css3中10个顶级命令
5. 简述网页设计师怎么使用好css3技术
以上就是css3制作鼠标经过按钮特效的详细内容。