用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。

方案1，图片辅助

传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：

1. @-webkit-keyframes rotate { 
2.   from {-webkit-transform:rotate(0deg);} 
3.   to {-webkit-transform:rotate(360deg);} 
4. } 
5. p#spinner { 
6.   height: 30px; 
7.   width: 30px; 
8.   overflow: hidden; 
9.   background: #000; 
10.   -webkit-mask-image: url("data:image/png[...]"); 
11.   -webkit-mask-size: 30px 30px; 
12.   -webkit-animation-name: rotate; 
13.   -webkit-animation-duration: 1.5s; 
14.   -webkit-animation-iteration-count: infinite; 
15.   -webkit-animation-timing-function: linear; 
16. } 

具体效果查看这里：Demo1

这个方案，只有safari可以很好地支持。chrome下支持不是很好，所以这是一个不太成熟的方案。

方案2， 纯CSS实现

方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。

这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。

1. @-webkit-keyframes fade { 
2.     from {opacity: 1;} 
3.     to {opacity: 0.25;} 
4. } 
5. div.spinner { 
6.     position: relative; 
7.     width: 30px; 
8.     height: 30px; 
9.     display: inline-block; 
10. } 
11. div.spinner div { 
12.     width: 20%; 
13.     height: 40%; 
14.     background: #000; 
15.     position: absolute; 
16.     left: 100%; 
17.     top: 100%; 
18.     opacity: 0; 
19.     -webkit-animation: fade 1s linear infinite; 
20.     -webkit-border-radius: 30px; 
21. } 
22. div.spinner div.bar1 { 
23.     -webkit-transform:rotate(0deg) translate(0, -142%); 
24.         -webkit-animation-delay: 0s; 
25. } 
26. [......] 
27. div.spinner div.bar12 { 
28.     -webkit-transform:rotate(330deg) translate(0, -142%);  
29.     -webkit-animation-delay: -0.0833s; 
30. } 

具体效果查看这里：Demo2

safari和chrome都能很好地渲染这个效果，并且也很容易定义实际大小，因为所有的bar的高度，宽度有是用百分比来定义的。缺点也很明显，需要定义12个bar，并且每个bar都要定义独立的css，相对来说html和css的代码量有点多。

方案3，这个方案类似sencha touch中实现的效果

方案的基本思想是：首先利用html和css呈现4个bar，再通过css的伪元素: before和：after定义每个bar的前后内容，这样使得由原始的4个bar产生12个bar的效果，其次通过css设置让12个bar的透明度逐渐递减，最后应用css3中旋转动画达到实际loading的效果。

1. .x-loading-spinner { 
2.     font-size: 250%; 
3.     height: 1em; 
4.     width: 1em; 
5.     position: relative; 
6.     -webkit-transform-origin: 0.5em 0.5em; 
7. } 
8. .x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after { 
9.     display: block; 
10.     position: absolute; 
11.     width: 0.1em; 
12.     height: 0.25em; 
13.     top: 0; 
14.     -webkit-transform-origin: 0.05em 0.5em; 
15.     -webkit-border-radius: 0.05em; 
16.     border-radius: 0.05em; 
17.     content: " "; 
18. } 
19. .x-loading-spinner > span.x-loading-top { 
20.     background-color: rgba(170, 170, 170, 0.99); 
21. } 
22. .x-loading-spinner > span.x-loading-top::after { 
23.     background-color: rgba(170, 170, 170, 0.9); 
24. } 
25. .x-loading-spinner > span.x-loading-left::before { 
26.     background-color: rgba(170, 170, 170, 0.8); 
27. } 
28. .x-loading-spinner > span.x-loading-left { 
29.     background-color: rgba(170, 170, 170, 0.7); 
30. } 
31. .x-loading-spinner > span.x-loading-left::after { 
32.     background-color: rgba(170, 170, 170, 0.6); 
33. } 
34. .x-loading-spinner > span.x-loading-bottom::before { 
35.     background-color: rgba(170, 170, 170, 0.5); 
36. } 
37. .x-loading-spinner > span.x-loading-bottom { 
38.     background-color: rgba(170, 170, 170, 0.4); 
39. } 
40. .x-loading-spinner > span.x-loading-bottom::after { 
41.     background-color: rgba(170, 170, 170, 0.35); 
42. } 
43. .x-loading-spinner > span.x-loading-right::before { 
44.     background-color: rgba(170, 170, 170, 0.3); 
45. } 
46. .x-loading-spinner > span.x-loading-right { 
47.     background-color: rgba(170, 170, 170, 0.25); 
48. } 
49. .x-loading-spinner > span.x-loading-right::after { 
50.     background-color: rgba(170, 170, 170, 0.2); 
51. } 
52. .x-loading-spinner > span.x-loading-top::before { 
53.     background-color: rgba(170, 170, 170, 0.15); 
54. } 
55. .x-loading-spinner > span { 
56.     left: 50%; 
57.     margin-left: -0.05em; 
58. } 
59. .x-loading-spinner > span.x-loading-top { 
60.     -webkit-transform: rotate(0deg); 
61.     -moz-transform: rotate(0deg); 
62. } 
63. .x-loading-spinner > span.x-loading-right { 
64.     -webkit-transform: rotate(90deg); 
65.     -moz-transform: rotate(90deg); 
66. } 
67. .x-loading-spinner > span.x-loading-bottom { 
68.     -webkit-transform: rotate(180deg); 
69.     -moz-transform: rotate(180deg); 
70. } 
71. .x-loading-spinner > span.x-loading-left { 
72.     -webkit-transform: rotate(270deg); 
73.     -moz-transform: rotate(270deg); 
74. } 
75. .x-loading-spinner > span::before { 
76.     -webkit-transform: rotate(30deg); 
77.     -moz-transform: rotate(30deg); 
78. } 
79. .x-loading-spinner > span::after { 
80.     -webkit-transform: rotate(-30deg); 
81.     -moz-transform: rotate(-30deg); 
82. } 
83. .x-loading-spinner { 
84.     -webkit-animation-name: x-loading-spinner-rotate; 
85.     -webkit-animation-duration: 0.5s; 
86.     -webkit-animation-iteration-count: infinite; 
87.     -webkit-animation-timing-function: linear; 
88. } 
89.  
90. @-webkit-keyframes x-loading-spinner-rotate { 
91.     from { 
92.     -webkit-transform: rotate(30deg); 
93.     } 
94.     to { 
95.     -webkit-transform: rotate(330deg); 
96.     } 
97. } 

具体效果查看这里：Demo3

这个方案是3个方案中应用css技术最彻底的一个，html的代码最少，并且也真正做到了旋转效果。缺点是不易扩展，chrome浏览器支持不是很理想。

综上分析，方案1浏览器支持不好，但是实现简单，方案2的html代码太多，但扩展好，浏览器支持不错，方案3的扩展性不好，浏览器支持也不好，但是较好地利用了css的特性。

如果开发桌面web系统，推荐方案2，如果是mobile系统，则方案2和方案3各有优势。

本文转自 powertoolsteam 51CTO博客，原文链接：http://blog.51cto.com/powertoolsteam/831252，如需转载请自行联系原作者