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度即可