一款纯css3实现的鼠标经过按钮特效教程

前端  /  管理员 发布于 7年前   216

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div align="center">  
2.        <div class="contener">  
3.            <div class="txt_button">  
4.                WIFEO</div>  
5.            <div class="circle">  
6.                 </div>  
7.        </div>  
8.    </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .contener   
2. {   
3.   width: 300px;   
4.   height: 60px;   
5.   background-color: #00bcd4;   
6.   line-height: 60px;   
7.   color: #ffffff;   
8.   font-weight: 300;   
9.   font-family: 'Roboto';   
10.   font-size: 25px;   
11.   position: relative;   
12.   overflow: hidden;   
13.   cursor: pointer;   
14.   box-shadow:1px 1px 1px #333333;   
15. }   
16. .txt_button   
17. {   
18.   position: absolute;   
19.   width: 100%;   
20. }   
21. .contener:hover .circle  
22. {   
23.   -webkit-animation:oblik 0.4s ease-in;   
24.   -webkit-transform-origin: 50% 50%;   
25.   -moz-animation:oblik 0.4s ease-in;   
26.   -moz-transform-origin: 50% 50%;   
27.   -ms-animation:oblik 0.4s ease-in;   
28.   -ms-transform-origin: 50% 50%;   
29.   animation:oblik 0.4s ease-in;   
30.   transform-origin: 50% 50%;   
31.   width: 100px;   
32.   height: 100px;   
33.   border-radius: 50%;    
34. }   
35. @-webkit-keyframes oblik {   
36.   0% {opacity:1;-webkit-transform:scale(0);}   
37.   100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;}      
38. }   
39. @-moz-keyframes oblik {   
40.   0% {opacity:1;-moz-transform:scale(0);}   
41.   100% {opacity:0;-moz-transform:scale(5);background-color: #006064;}      
42. }   
43. @-ms-keyframes oblik {   
44.   0% {opacity:1;-ms-transform:scale(0);}   
45.   100% {opacity:0;-ms-transform:scale(5);background-color: #006064;}      
46. }   
47. @keyframes oblik {   
48.   0% {opacity:1;transform:scale(0);}   
49.   100% {opacity:0;transform:scale(5);background-color: #006064;}      
50. }  

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