如何制作一个会旋转的按钮 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="UTF-8">
 6     <style>
 7         .demo{ 
 8             width: 32px;
 9             height: 32px; 
10             background: url(arr.png) no-repeat; 
11             background-size: contain;
12 
13             transform: rotate(0deg);
14             -webkit-transform: rotate(0deg);
15             -o-transform: rotate(0deg);
16 
17             transition: .3s ;
18             -webkit-transition: .3s ;
19             -o-transition: .3s ;
20         }
21 
22     .demo:hover{ 
23         transform: rotate(180deg);
24         } 
25      </style>
26 </head>
27 <body>
28     <div class="demo"></div>
29 </body>
30 </html>

其实很简单，主要利用了伪类:hover以及transform属性，

首先在元素开始时，设置div的transition过度时间0.3秒，然后再hover里添加旋转角度 rotate 180度即可

posted @ 2017-08-30 16:38  贝勒爷888  阅读(367)  评论(0)  编辑  收藏  举报