以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. @-webkit-keyframes x-loading-spinner-rotate {
90. from {
91. -webkit-transform: rotate(30deg);
92. }
93. to {
94. -webkit-transform: rotate(330deg);
95. }
96. }

具体效果查看这里：Demo3

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

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

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

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~