效果截图：
HTML代码：
<div class="divBox">
<div class="loader">
<div class="loading-1">
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
CSS代码：
.divBox{
width: 100%; padding: 3%; box-sizing:border-box;
}
.loader{
width: 30%; height: 260px; float: left; border:1px solid #ccc; margin-right: 3%;
}
/*第一个loading动画*/
.loading-1{
position: relative; width: 60px; height: 60px; margin: 100px auto;
}
.loading-1 i{
background-color: #333; width: 60px; height: 60px; border-radius: 50%; position: absolute; left:; top:; opacity:;
}
/*为第一个loading动画定义关键帧*/
@keyframes loading01{
0%{ transform: scale(0); opacity:; }
5%{ opacity:; }
100%{ transform: scale(1); opacity:; }
}
.loading-1 i:nth-child(1){
animation: loading01 1s linear 0s infinite;
}
.loading-1 i:nth-child(2){
animation: loading01 1s linear 0.2s infinite;
}
.loading-1 i:nth-child(3){
animation: loading01 1s linear 0.4s infinite;
}
/*第二个loading动画*/
.loading-2{
width: 40px; height: 40px; margin: 110px auto; position: relative;
}
/*为第二个loading动画定义关键帧*/
@keyframes loading-2{
0%{ transform: rotate(0deg) scale(1); }
50%{ transform: rotate(180deg) scale(0.6); }
100%{ transform: rotate(360deg) scale(1); }
}
.loading-2 i{
position: absolute; border:2px solid #333; border-color: transparent #333; border-radius: 50%;
}
.loading-2 i:first-child{
width: 40px; height: 40px; left:; top:; animation: loading-2 1s ease-in-out 0s infinite;
}
.loading-2 i:last-child{
width: 20px; height: 20px; left: 10px; top: 10px; animation: loading-2 1s ease-in-out 0.4s infinite reverse
}
/*第三个loaing动画*/
.loading-3{
width: 80px; height: 20px; position: relative; margin: 120px auto;
}
/*为第三个loading动画定义关键帧*/
@keyframes loading03{
0%{ left:100px; top:; }
80%{ left:; top:; }
85%{ left:; top: -20px; width: 20px; height: 20px; }
90%{ width: 80px; height: 10px; }
95%{ left:100px; top: -20px; width: 20px; height: 20px; }
100%{ left:100px; top:; }
}
.loading-3 i{
width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333;
}
.loading-3 i:nth-child(1){
animation: loading03 2s linear 0s infinite;
}
.loading-3 i:nth-child(2){
animation: loading03 2s linear -0.4s infinite;
}
.loading-3 i:nth-child(3){
animation: loading03 2s linear -0.8s infinite;
}
.loading-3 i:nth-child(4){
animation: loading03 2s linear -1.2s infinite;
}
.loading-3 i:nth-child(5){
animation: loading03 2s linear -1.6s infinite;
}
