特效loading(纯css)

先请大家看loading的效果

个人感觉是是一个挺不错的loading特效 具体这个效果怎么做出来的请慢慢了解

第一步 我们首先需要了解一些，这个loading的html结构，它其实就是四个大div重叠在一起，每个大div里有4个小div， 我们可以看一下图我吧每个div 边框显示出来了

这里一共是两大组，两个大div为一组，我们只要理解了其中一组，另外一组的情况也跟他一样 这个整体的html结构

<div class="loader">
    <div class="horizontal">
      <div class="up">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
      <div class="down">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
    </div>
    <div class="vertical">
      <div class="up">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
      <div class="down">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
      </div>
    </div>
</div>

circle的这个div是用绝对定位的，4个是相互覆盖的我所以在图里我们就看到一个

第二步 我们可以先看horizontal这一组的原始状态

这是没有做任何转动的，我们现在想要的就是两个div的点能够相互覆盖，下面的那个div框也就是class为down的那个div需要转180.由于父级down这个div长和宽是0 左右父级转的中心点是就是做左上角如图

旋转完的状态如图

上图是旋转了180度之后 这样就离两个div覆盖又进一步,在让子div也就是circle旋转45度， 由于旋转了180度，两个子div旋转是相对的 如图

相互旋转45度之后的状态如图

第三步 我们可以看一下上面的动图，在动起来的时候是越在下面的div是越小的才会有那种小尾巴的动画效果 如图

这个缩小相对来说比较简单用scale 直接缩小就可以了

第四步 就是做动画处理，这个个动画还好，所有circle往一个方向转动，然后在个每个circle做动画延迟，就可以了 每个circle的颜色大家可以自定义

.circle:nth-child(2):after  {
    background: #56bebf;
    transform: scale(0.8,0.8);
}

.circle:nth-child(3) { 
    animation-delay: 225ms; 
    z-index:3;
}

.circle:nth-child(3):after  {
    background: #ffa489; 
    transform: scale(0.6,0.6);
}

.circle:nth-child(4) {
    animation-delay: 350ms; 
    z-index:2;
}

.circle:nth-child(4):after  {
    background: #ff6d37; 
    transform: scale(0.4,0.4);
}

这个只是部分代码，后面整体部分我会放在代码块，animation-delay延迟动画开始时间 大家可以看一下两个div的动画情况

两个的loading的效果个人觉得也还行

另外一半的写法套路和这个差不多

大家可以自己玩一下 这个是我的代码块 欢迎大家拍砖

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了