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

以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;
     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;
     100px;
}
.abgne-loading-20140104-2 .loading {
    border: 6px solid #168;
    border-right: 6px solid #fff;
    border-bottom: 6px solid #fff;
    height: 100%;
     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: 1;}
            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: 0;
           -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>

 形如：