以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。
方案1，图片辅助
传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：
HTML:
男
CSS
body { background-color: #eee;}.loading { border: 3px solid #3a3; border-right: 3px solid #fff; border-bottom: 3px solid #fff; height: 50px; width: 50px; border-radius: 50%; -webkit-animation: loading 1s infinite linear; -moz-animation: loading 1s infinite linear; -o-animation: loading 1s infinite linear; animation: loading 1s infinite linear;}@-webkit-keyframes loading { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}@-moz-keyframes loading { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}@-o-keyframes loading { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); }}@keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.abgne-loading-20140104-2 { position: relative; height: 100px; width: 100px;}.abgne-loading-20140104-2 .loading { border: 6px solid #168; border-right: 6px solid #fff; border-bottom: 6px solid #fff; height: 100%; width: 100%; border-radius: 50%; -webkit-animation: loading 1s infinite linear; -moz-animation: loading 1s infinite linear; -ms-animation: loading 1s infinite linear; -o-animation: loading 1s infinite linear; animation: loading 1s infinite linear;}.abgne-loading-20140104-2 .word { color: #168; position: absolute; top: 0; left: 0; display: inline-block; text-align: center; font-size: 72px; line-height: 72px; font-family: 微軟正黑體, arial; margin: 18px 0 0 20px; padding: 0;}
形如：
方案2， 纯CSS实现
方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。
这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。
HTML
CSS
形如：
