本文探讨了使用单个DIV元素创建加载动画。我们已经剖析了旋转装载机；现在，让我们解决另一个熟悉的动画：点。
点装载机无处不在。他们的吸引力在于他们的简单性：三个点，类似于文本省略（…），执行动态视觉序列。
我们的目标是仅使用一个Div复制该动画，从而消除了每个点或单独动画的单个Div的需求。上面的示例使用单个Div，CSS和无伪元素来实现这一目标，并巧妙地结合了背景和遮罩技术。通过使背景梯度动画创建变色点的幻觉。
让我们从背景动画开始：
.loader {
宽度：180px;
方面比例：8/5;
背景：
圆锥梯度（红色50％，蓝色0）无重复，
圆锥梯度（绿色50％，紫色0）无重复；
背景大小：200％50％；
动画：背面4S无限线性；
}
@keyframes back {
0％，100％{背景位置：0％0％，0％100％; }
25％{背景位置：100％0％，0％100％； }
50％{背景位置：100％0％，100％100％; }
75％{背景位置：0％0％，100％100％; }
} 180px范围的.loader元素显示出两个具有锋利颜色过渡的圆锥梯度。上半场使用红色和蓝色，下半部分绿色和紫色。 200％的宽度可确保每半时都能看到一种颜色。动画在位置上循环，从而产生了色彩变化的幻想。
要深入了解background-position ，请参阅此堆栈溢出答案。动画巧妙地操纵了梯度的X和Y坐标。
为什么
conic-gradient()而不是linear-gradient()？
使用conic-gradient()更简洁，并取得相同的结果。
通过将动画的时序函数从linear调整到steps(1) ，我们消除了颜色闪烁。
与上一篇文章一样，我们使用CSS面具。面具使我们能够选择性地揭示背景的一部分。在这里，我们将创建点，通过它们揭示背景梯度。
我们将采用radial-gradient() ：
.loader {
/ * ...以前的样式... */
-_ g：径向级别（＃000 68％，＃0000 71％）no-repeat;
蒙版：var（-_ g），var（-_ g），var（-_ g）;
面具大小：25％40％；
} CSS变量， --_g ，简化了代码。三个径向梯度创建点。
现在，我们需要一个动画来移动点：
.loader {
/ * ...以前的样式... */
动画：加载2S无限；
}
@keyframes load {
0％，100％{mask-position：0％0％，50％0％，100％0％; }
16.67％{mask-position：0％100％，50％0％，100％0％; }
33.33％{mask-position：0％100％，50％100％，100％0％; }
50％{mask-position：0％100％，50％100％，100％100％; }
66.67％{mask-position：0％0％，50％100％，100％100％; }
83.33％{mask-position：0％0％，50％0％，100％100％; }
}该动画调整了每个点mask-position的Y坐标，从而创建了上下移动。将其与梯度动画相结合会产生最终效果。
CSS变量可轻松调整颜色和尺寸调整。也可以通过修改密钥框来创建不同的动画。此处提供了进一步的示例，包括单点加载程序和Blobby效应加载程序。还显示了CSS网格方法，简化了尺寸和定位。
本文演示了使用单个Div创建点加载程序。下一篇文章将涵盖在这里学到的技术的基础上。
(Remember to replace https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c and https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e with actual links if you have them.)
以上是单元素加载程序：点的详细内容。更多信息请关注PHP中文网其他相关文章！
