纯CSS3实现小圆盘无限loading效果

继续mark百度前端技术学院上的题目，这次要攻克的是如何纯用CSS3来实现饼状的loading效果，下面我会讲解关键技术点和思路，并在文末给出源代码和实际运行的demo。

效果图

最终实现的效果图如下：

整体设计思路和要点

整体流程：

• 设计3/4圆环
• 制作左侧和右侧的底座半圆
• 设计左侧和右侧的旋转半圆，且令左侧的旋转圆逆时针转到右侧，右侧的旋转圆逆时针转到左侧
  对应的HTML结构图如下

    <article>
        <span class="cicle">
            <span class="left"><span class="rotate"></span></span>
            <span class="right"><span class="rotate"></span></span>
        </span>
    </article>

3/4圆环

3/4圆环的设计思路还是比较简单的，设置父元素的宽高，然后设置:before伪元素，令伪元素width 和 height 均为100% ，然后加上box-sizing: border-box 启用border-box盒模型，使得宽高与父元素相同并占据整个空间

.cicle {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.cicle:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /*使用border-box盒模型，令宽高包括了content、padding和border，使得圆环能完整出现*/
    box-sizing: border-box;
    border: 4px solid #ff5aa6;
    border-radius: 50%;   /*令其border为圆环*/
    border-top: 4px solid transparent;    /* 有1/4圆为透明 */
    animation: cicle-rotate 2s infinite linear;
}

@keyframes cicle-rotate {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(-180deg)
    }
    100% {
        transform: rotate(-360deg)
    }
}

核心要点之旋转的小圆盘

整个loading由左右两侧的底座半圆盘和旋转圆盘构成，这里只分析左侧的旋转情况，右侧的情况可以以此类推。两个半圆盘的实现效果是类似的，都是通过border-radius 进行赋值才实现的，具体做法详见底部的源代码。

为了便于理解，这里我把旋转的过程进行了截图并配上文字。这里的关键点在于理解左侧其实存在两个半圆，一个是静止的底座半圆盘，另一个是旋转的半圆盘，然后通过动画令旋转半圆盘绕着圆心逆时针旋转，将底座半圆盘给露出来。这里底座圆盘的overflow:hidden 属性起到了重要的作用，这个属性使得旋转半圆盘移动到右侧后会被隐藏，从而实现这个效果，否则的话，旋转半圆盘到了右侧也会继续存在。


整个项目的运行效果如下：



想看源代码和实际效果的戳我

参考资料

https://codepen.io/CreativeJuiz/pen/vFBIh
http://ife.baidu.com/note/detail/id/430
http://ife.baidu.com/note/detail/id/1016