以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。
方案1，图片辅助
传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相比传统方案，这个方案的好处是可以直接通过修改CSS来改变背景色，可以修改大小和旋转速度。如下是具体的CSS代码：
HTML:
<div class="loading"></div> <div class="abgne-loading-20140104-2">
<div class="loading"></div>
<div class="word">男</div>
</div>
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
<div class="spinner">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
<div class="bar4"> </div>
<div class="bar5"> </div>
<div class="bar6"></div>
<div class="bar7"> </div>
<div class="bar8"> </div>
<div class="bar9"> </div>
<div class="bar10"> </div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
CSS
<style type="text/css">
@-webkit-keyframes fade {
from {opacity:;}
to {opacity: 0.25;}
}
div.spinner {
position: relative;
width: 80px;
height: 80px;
display: inline-block;
}
div.spinner div {
width: 20%;
height: 40%;
background: #000;
position: absolute;
left: 100%;
top: 100%;
opacity:;
-webkit-animation: fade 1s linear infinite;
-webkit-border-radius: 30px;
}
div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
</style>
形如：