这个视频用CSS来写一个酷炫的跑马灯加载等待的效果。

·来看一下代码：<span style="--：html结构非常简单，加载的这些小圆点等一下就通过这些width的尾元素来写，一共有二十个，每个里面都定义了一个变量i。当然这一堆东西是可以通过JS来生成的，也非常简单，大家可以自己试着去改一下。

·样式现在写了一些基本的样式，其它样式重新来写。<span style="首先是加载的这个区域，给它一个相对定位，大小是120乘以120。<div class="loader"然后写一下这些span。

·现在还没有什么东西，因为这些小圆点还没有写，就一个背景，这些小圆点通过width的尾元素来写，大小给15像素就可以了，给个背景颜色还有圆角。现在这些小圆点是重叠在一起了，可以把它旋转开。

·width进行一个load，用一下计算的函数，用定义好的这个变量乘以18度。然后给这些小圆点加一些阴影，一共五层阴影非常简单，就给它叠加起来。

·接下来就是动画的效果。首先先让背景颜色可以不断的切换起来，给它绑定一个动画，来写一下这个动画，非常简单。width：1通过滤镜去调整它的色相就可以了。position：relativ开始在0度的位置，把色相的角度刚好转一圈，现在背景颜色就已经有变化了。

·最后就是怎么样让这些小圆点有一个跑马灯的加载效果。这里很简单，再来写一个动画，对它进行缩放，一开始保持原来的大小，然后到百分之八十一，直到后面就让它消失，把这个动画绑定在伪元素上面。

现在这些小圆点也有动画了，但是它们是整体同时出现同时消失的，没有那种跑马灯的加载效果。其实也非常简单，只要让这些小圆点的动画起始时间不一样就可以了，也就是给它加一个动画的延迟。这里同样要计算一下，用定义好的变量i每个都乘以0.1秒。

来看一下最终的效果，没有问题，这种跑马灯的加载效果就完成了。

这个视频就到这里，感谢大家的收看。