一款纯css3实现的鼠标悬停动画按钮

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

　　今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：

　　实现的代码。

　　html代码：

复制内容到剪贴板

1. <div>  
2.         <span></span>  
3.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. body   
2.         {   
3.             background-color: #333;   
4.         }   
5.         div   
6.         {   
7.             width: 200px;   
8.             height: 200px;   
9.             margin: 0 auto;   
10.         }   
11.         span   
12.         {   
13.             position: relative;   
14.             width: 180px;   
15.             height: 180px;   
16.             display: block;   
17.             margin: auto;   
18.             top: 25px;   
19.             border: 20px solid rgba(255, 255, 0, .25);   
20.             background-color: rgba(124,155,13,1);   
21.             -webkit-transition: .5s;   
22.             -moz-transition: .5s;   
23.             -ms-transition: .5s;   
24.             transition: .5s;   
25.             border-radius: 30px 0px 30px 0px;   
26.         }   
27.         span:before, span:after   
28.         {   
29.             position: absolute;   
30.             display: block;   
31.             background-color: #fff;   
32.             border-radius: 10px;   
33.             margin: auto;   
34.             top: 0px;   
35.             bottombottom: 0px;   
36.             left: 0px;   
37.             rightright: 0px;   
38.         }   
39.         span:before   
40.         {   
41.             width: 100px;   
42.             height: 10px;   
43.             content: "";   
44.         }   
45.            
46.         span:after   
47.         {   
48.             width: 10px;   
49.             height: 100px;   
50.             content: "";   
51.         }   
52.            
53.         div:hover span   
54.         {   
55.             -webkit-transform: scale(.5) rotate(45deg);   
56.             -moz-transform: scale(.5) rotate(45deg);   
57.             -ms-transform: scale(.5) rotate(45deg);   
58.             transform: scale(.5) rotate(45deg);   
59.             border-radius: 110px;   
60.             background-color: rgba(112,18,255,1);   
61.         }