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

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

方案1. 图片辅助

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

具体效果查看这里：Demo1

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

方案2. 纯CSS实现

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

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

具体效果查看这里：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的效果。

具体效果查看这里：Demo3

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

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

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