用css3制作旋转加载动画
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍2种实现的方案。
方案1，图片辅助
传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：
[html] view plain copy
1. @-webkit-keyframes rotate {
- from {-webkit-transform:rotate(0deg);}
3. to {-webkit-transform:rotate(360deg);}
- }
5. p#spinner {
- height: 30px;
7. width: 30px;
- overflow: hidden;
9. background: #000;
- -webkit-mask-image: url("data:image/png[...]");
11. -webkit-mask-size: 30px 30px;
- -webkit-animation-name: rotate;
13. -webkit-animation-duration: 1.5s;
- -webkit-animation-iteration-count: infinite;
15. -webkit-animation-timing-function: linear;
- }
这个方案，只有safari可以很好地支持。chrome下支持不是很好，所以这是一个不太成熟的方案。
方案2， 纯CSS实现
方案的思路是，首先用css渲染12个静态的bar，每个bar间隔30度的角度，给每个bar添加背景变淡的动画，但是相邻bar的动画效果延迟1/12秒，来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。
这个旋转效果是伪旋转，所有的bar都没有真正做到旋转。
1. @-webkit-keyframes fade {
- from {opacity: 1;}
3. to {opacity: 0.25;}
- }
5. div.spinner {
- position: relative;
7. width: 30px;
- height: 30px;
9. display: inline-block;
- }
11. div.spinner div {
- width: 20%;
13. height: 40%;
- background: #000;
15. position: absolute;
- left: 100%;
17. top: 100%;
- opacity: 0;
19. -webkit-animation: fade 1s linear infinite;
- -webkit-border-radius: 30px;
21. }
- div.spinner div.bar1 {
23. -webkit-transform:rotate(0deg) translate(0, -142%);
- -webkit-animation-delay: 0s;
25. }
- [......]
27. div.spinner div.bar12 {
- -webkit-transform:rotate(330deg) translate(0, -142%);
29. -webkit-animation-delay: -0.0833s;
- }
