css3实现loading动画效果

浏览数：11 / 时间：2015年06月09日

最终的loading效果如图：

说明：共两个层，每个层里有4个花瓣，共组成8个花瓣；动画过程为每个花瓣的透明度依次从1变为0的过程。

HTML代码：

<div class="loadingBox">
    <div class="loadingBox1">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
        <div class="circle circle4"></div>
    </div>
    <div class="loadingBox2">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
        <div class="circle circle4"></div>
    </div>    
</div>

CSS代码：

<style type="text/css">
.loadingBox{
    width:25px;
    height:25px;
    position:relative;
    margin:50px auto;    
}
.loadingBox1,.loadingBox2{width:100%; height:100%;position:absolute;}
.loadingBox2{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.circle{
    position:absolute;
    width:10px;
    height:10px;
    background:#333;    
    -webkit-animation:loading .8s infinite linear;
    -moz-animation:loading .8s infinite linear;
    -o-animation:loading .8s infinite linear;
    animation:loading .8s infinite linear;
}
.loadingBox2 .circle1{
    -webkit-animation-delay:0.1s;
    -moz-animation-delay:0.1s;
    animation-delay:0.1s;
}

.circle2{
    -webkit-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    animation-delay:0.2s;
}
.loadingBox2 .circle2{
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
    animation-delay:0.3s;
}
.circle3{
    -webkit-animation-delay:0.4s;
    -moz-animation-delay:0.4s;
    animation-delay:0.4s;
}
.loadingBox2 .circle3{
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    animation-delay:0.5s;
}
.circle4{
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loadingBox2 .circle4{
    -webkit-animation-delay:0.7s;
    -moz-animation-delay:0.7s;
    animation-delay:0.7s;
}

.circle1{/*左上*/
    top:0;left:0;
    border-radius:0 10px;
}
.circle2{/*右上*/
    top:0;right:0;
    border-radius:10px 0;
}
.circle3{/*右下*/
    bottom:0;right:0;
    border-radius:0 10px;
}
.circle4{/*左下*/
    bottom:0; left:0;
    border-radius:10px 0;
}
@-webkit-keyframes loading{
    0%{
        opacity:1;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:0;
    }
}
@-moz-keyframes loading{
    0%{
        opacity:1;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:0;
    }
}
loading{
    0%{
        opacity:1;
    }
    50%{
        opacity:0.5;
    }
    100%{
        opacity:0;
    }
}
</style>