继续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