CSS3实现炫酷的loading效果

话不多说，直接看图:

loading.PNG

• 主要使用css3中的自定义动画keyframes和对伪类的使用
• 先看简单的html结构:

<div class="loading-box">
  <span>loading...</span>
</div>

• 接下来就是css了:

.loading-box{
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 10px solid #3888fa;
    position:relative;
    animation: a1 2s linear infinite;  //动画名为a1，在下面定义
    //设置圆角再设置边框就会有弧线的效果
}
.loading-box:before,.loading-box:after{
    content: ''
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: -10px;   //反复调节得到的数值
    box-sizing: border-box
    border-radius: 50%;
  //在盒子的左边加两个伪类元素
}
 .loading-box:before{
    border-top:10px solid #e67e22;
    transform: rotate(120deg);  //让其中一个伪类元素旋转至右边
}
 .loading-box:after{
    border-top:10px solid #ff005a;
    transform: rotate(240deg);  //旋转至左边
}
 .loading-box span{
    position: absolute;
    width: 200px;
    height: 200px;
    color: #000;
    font-size: 15px;
    text-align: center;
    line-height: 200px;
    animation: a2 2s linear infinite;
    //给文字也定义一个动画
}
//让盒子旋转起来
  @keyframes a1 {
    to{
      transform: rotate(360deg)
    }
  }
//让文字反方向旋转，实现文字不动的效果
 @keyframes a2 {
    to{
      transform: rotate(-360deg)
    }
  }

到这里就大功告成了，实现起来代码也不多，css还是非常强大的，超人鸭所写的也只是一点皮毛，欢迎各位指教哦。