拐道交叉的css3动画,网页前端开发同心圆弧旋转 loading 特效

今天来给大家说说一个loading效果，一个同心圆弧形旋转效果，在我们网页平时加载时候可以使用这个来做loading效果，虽然说现在网页优化好了很多，过渡时时间已经非常少了，但是理解这个案例，可以把其中的一些方法运用到其他的CSS3动画当中去，这样可以帮助我们更好的学会CSS3；

好了，话不多说，先来看看今天的效果。

今天还是不用JS，就用CSS3做一个循环动画就好了。

先定义DOM，写一个元素就行了

然后就是下样式了，先做个居中显示

我们今天做的一共画三层圆弧，先画最外一层的样式：

再用伪元素画中间一层的样式：

再用伪元素画最内一层的样式：

定义一个自动循环动画效果：

最后，应用动画效果到每层，每层都执行自动动画，时间差不一样，产生交叉效果：

运行，就完成了

全部CSS源码展示：

这次的课程，难点不多，主要还是在画圆弧的地方，几个知识点：

border-left/right-color (左右框颜色)

border-top/bottom-color(上下框颜色)

animation-duration(执行动画一个周期的时间)

如果你也喜欢我的教程，点一下赞，转发和关注一下吧，以后还会继续出更多干货教程。

李老师的前端开发工程师班，在线学习课程马上就要开班咯，你如果是零基础学习，想成为前端开发工程师，也喜欢前端开发，还在犹豫什么，快趁现在加入前端开发课程学习吧！