今天来给大家说说一个loading效果，一个同心圆弧形旋转效果，在我们网页平时加载时候可以使用这个来做loading效果，虽然说现在网页优化好了很多，过渡时时间已经非常少了，但是理解这个案例，可以把其中的一些方法运用到其他的CSS3动画当中去，这样可以帮助我们更好的学会CSS3；
好了，话不多说，先来看看今天的效果。
今天还是不用JS，就用CSS3做一个循环动画就好了。
先定义DOM，写一个元素就行了
然后就是下样式了，先做个居中显示
我们今天做的一共画三层圆弧，先画最外一层的样式：
再用伪元素画中间一层的样式：
再用伪元素画最内一层的样式：
定义一个自动循环动画效果：
最后，应用动画效果到每层，每层都执行自动动画，时间差不一样，产生交叉效果：
运行，就完成了
全部CSS源码展示：
这次的课程，难点不多，主要还是在画圆弧的地方，几个知识点：
border-left/right-color （左右框颜色）
border-top/bottom-color（上下框颜色）
animation-duration（执行动画一个周期的时间）
如果你也喜欢我的教程，点一下赞，转发和关注一下吧，以后还会继续出更多干货教程。
李老师的前端开发工程师班，在线学习课程马上就要开班咯，你如果是零基础学习，想成为前端开发工程师，也喜欢前端开发，还在犹豫什么，快趁现在加入前端开发课程学习吧！
网友评论