css3 border旋转时的动画应用

废话不多说了，直接给大家贴代码了，具体代码如下所示：
Javascript Code复制内容到剪贴板

1.     
2.     
3.     
4.     
5.     
6. body{    
7. background: #ccc;    
8. }    
9. .he{    
10. width: 100px;    
11. height: 100px;    
12. margin: 200px auto;    
13. border: 10px solid black;    
14. border-left-color: #fff;    
15. border-radius: 70px;    
16. animation: namemf 1s linear infinite;    
17. -webkit-animation:namemf 1s linear infinite;    
18. -ms-animation: namemf 1s linear infinite;    
19. }    
20. @keyframes namemf{    
21. from{    
22. transform:rotate(0deg) ;    
23. }    
24. to{    
25. transform: rotate(360deg);    
26. }    
27. }    
28. @-webkit-keyframes namemf{    
29. from{    
30. transform:rotate(0deg) ;    
31. }    
32. to{    
33. transform: rotate(360deg);    
34. }    
35. }    
36. @-ms-keyframes namemf{    
37. from{    
38. transform:rotate(0deg) ;    
39. }    
40. to{    
41. transform: rotate(360deg);    
42. }    
43. }    
44.     
45.     
46.     
47. class="he">    
48.     
49.     
50.    

效果图

上面代码中要注意的地方：
border-radius: 70px;为70px时div才能显示为圆形，因为上下左右的border多出了20px
border-left-color: #fff;可以独立设置一边的颜色
animation: namemf 1s linear infinite;中linear为匀速运动　　　　　　　
ease：动画以低速开始，然后加快，在结束前变慢。　　　　　　　
ease-in：动画以低速开始　　　　　　　
ease-out：动画以低速结束