多种多样的Loading特效

每次打开一些新闻客服端等APP都会看到很有特色的loading特效，就好奇用前端的知识该怎么去实现，本来以为要花挺长时间，不过明白了原理之后就很快搞定了。
大多数的特效原理都是想通的，所以就上了四种特效，代码可能写的比较粗糙，大家多多理解，相互学习。（并未兼容IE浏览器哦）。

第一种特效：

<div id="loading_1">
        <div class="cir cir1"><span></span></div>
        <div class="cir cir2"><span></span></div>
        <div class="cir cir3"><span></span></div>
        <div class="cir cir4"><span></span></div>
    </div>

首先是Html结构，四个div分别具有不同的颜色，将其进行绝对定位，让四个div的初始位置在同一个点，然后对每个div块进行动画设置。最后再将外层div绕中心点进行旋转形成最终效果动画。

下面是样式代码，主要通过css3动画实现。

#loading_1 {
         400px;
        height: 200px;
        /*border: 1px solid #ddd;*/
        position: relative;
        animation: rotate 2s infinite;
        margin: 0 auto;
    }
    
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    .cir {
        position: absolute;
         16px;
        height: 16px;
        overflow: hidden;
        top: 92px;
        left: 192px;
    }
    
    #loading_1 div:nth-child(1) {
        background: #8EE5EE;
    }
    
    #loading_1 div:nth-child(2) {
        background: #FFE4B5;
    }
    
    #loading_1 div:nth-child(3) {
        background: #00CD00;
    }
    
    #loading_1 div:nth-child(4) {
        background: #FF6A6A;
    }
    
    .cir1 {
        animation: loading_1 2s linear infinite;
    }
    
    @keyframes loading_1 {
        0% {
            top: 62px;
            left: 162px;
        }
        50% {
            top: 92px;
            left: 192px;
        }
        100% {
            top: 62px;
            left: 162px;
        }
    }
    
    .cir2 {
        animation: loading_2 2s linear infinite;
    }
    
    @keyframes loading_2 {
        0% {
            top: 62px;
            left: 222px;
        }
        50% {
            top: 92px;
            left: 192px;
        }
        100% {
            top: 62px;
            left: 222px;
        }
    }
    
    .cir3 {
        animation: loading_3 2s linear infinite;
    }
    
    @keyframes loading_3 {
        0% {
            top: 122px;
            left: 162px;
        }
        50% {
            top: 92px;
            left: 192px;
        }
        100% {
            top: 122px;
            left: 162px;
        }
    }
    
    .cir4 {
        animation: loading_4 2s linear infinite;
    }
    
    @keyframes loading_4 {
        0% {
            top: 122px;
            left: 222px;
        }
        50% {
            top: 92px;
            left: 192px;
        }
        100% {
            top: 122px;
            left: 222px;
        }
    }

代码中的数值设置不要在意，根据不同动画效果设置也不同。

具体效果演示可点击：http://www.w3cfuns.com/notes/19044/54865f5fbdd5a3126798755e7c3e14a2.html

第二种特效：

首先还是上Html结构代码

<div id="loading_2">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
    </div>

特效的动画原理：首先同样绝对定位四个div，每一个div的左上角都有一个span，具有不用的颜色，刚开始四个div是重叠在一起的，然后对每一个div进行旋转，但是此时要给后续的div旋转动画设置一个延迟。

来看一下css代码：

#loading_2 {
         400px;
        height: 200px;
        position: relative;
        margin: 0 auto;
    }
    
    #loading_2 div {
         100px;
        height: 100px;
        position: absolute;
        margin-left: 150px;
        animation: loading 1.8s linear infinite;
    }
    
    #loading_2 span {
        display: block;
         20px;
        height: 20px;
        border-radius: 20px;
    }
    
    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        10% {
            transform: rotate(45deg);
        }
        50% {
            opacity: 1;
            transform: rotate(160deg);
        }
        62% {
            opacity: 0;
        }
        65% {
            opacity: 0;
            transform: rotate(200deg);
        }
        90% {
            transform: rotate(340deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    #loading_2 span {
        background: #8EE5EE;
    }
    
    #loading_2 div:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    #loading_2 div:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    #loading_2 div:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    #loading_2 div:nth-child(4) {
        animation-delay: 0.8s;
    }

第三种特效：

这个特效就很容易实现了，通过css3属性中的scale缩放属性很容易实现，同样可以设置延迟，实现不同的效果。

直接上代码了：

#loading_3 {
         400px;
        height: 200px;
        margin: 0 auto;
    }
    
    #loading_3 div {
        float: left;
         10px;
        height: 80px;
        margin-left: 20px;
        animation: scale 1.5s linear infinite;
    }
    
    @keyframes scale {
        0% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(1, 1.8);
        }
        100% {
            transform: scale(1, 1);
        }
    }
    
    #loading_3 div:nth-child(1) {
        background: #8EE5EE;
        margin-left: 150px;
        animation-delay: 0.2s;
    }
    
    #loading_3 div:nth-child(2) {
        background: #FFE4B5;
        animation-delay: 0.4s;
    }
    
    #loading_3 div:nth-child(3) {
        background: #00CD00;
        animation-delay: 0.6s;
    }
    
    #loading_3 div:nth-child(4) {
        background: #FF6A6A;
        animation-delay: 0.8s;
    }

总结：

一般这种动画的实现原理都大同小异，明白了一个动画的动画原理，结合html/css知识的理解，就很容易做到。

具体效果可查看：http://www.w3cfuns.com/notes/19044/54865f5fbdd5a3126798755e7c3e14a2.html