浙江铃声推荐联盟

网页前端开发同心圆弧旋转 loading 特效

网页前端开发学习2018-11-08 14:53:40

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

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

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

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

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

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

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

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

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

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

运行,就完成了

全部CSS源码展示:

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

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

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

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

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

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