制作仅CSS的装载机是一个有意义的挑战。令人着迷的无限动画总是令人满意的。 Codepen展示了各种各样的技术，但是本文的重点是实现具有最小代码的单元素加载程序。
我已经开发了超过500个单div加载器，这个四部分系列共享了所使用的技术。我们将探讨众多示例，展示微妙的调整如何产生不同的结果以及代码的简洁程度。
第一篇文章创建了一个常见的加载器模式：旋转栏。
一种简单的方法使用多个元素（在这种情况下为九个元素），每个元素在父母内代表一个bar。不透明度和转换创造出旋转效果。
但是，我的方法仅使用一个元素：
<div></div>
...和10个CSS声明：
.loader {
宽度：150px; / *控制大小 */
方面比例：1;
显示：网格；
面具：锥形学位（来自22DEG，＃0003，＃000）;
动画：加载1S步骤（8）无限；
}
.loader，
.loader：{
-_ g：线性级别（＃17177C 0 0）50％; / *在这里更新颜色 */
背景：
var（ - _ g）/34％8％空间无重复，
var（-_ g）/8％34％无重复空间；
}
.loader：{
内容： ””;
变换：旋转（45维格）;
}
@keyframes load {
to {变换：旋转（1Turn）; }
}最初，该代码似乎很不寻常，但是比看起来要简单。首先，我们定义元素的尺寸 - 150px正方形。无论调整大小如何， aspect-ratio可以确保它保持正方形。
.loader {
宽度：150px; / *控制大小 */
方面比例：1; / *保持正方形 */
}对于CSS加载器，单个尺寸控制值是理想的。这是宽度；所有计算都是相对于它的。这可以轻松调整尺寸。
渐变创建条。这是最复杂的部分。一个梯度生成两个条：
背景：线性级别（＃17177C 0 0）50％/34％8％空间无重复；
该梯度使用一种颜色和两种颜色止损，从而产生纯色。尺寸宽34％，高8％（50％）。 space关键字重复了梯度，创建了两个条。
从规范中：
将图像按照在背景定位区域内的频率进行重复，而不会被剪切，然后将图像间隔填充以填充该区域。第一个也是最后一个图像触及该区域的边缘。
34％的宽度只能允许两个条（3 34％> 100％），留下差距（100％-2 34％= 32％）。 space将这些缝隙集中在集中。 33％至50％之间的宽度可确保至少两个带间距的条。
我们使用第二个梯度创建了另外两个条，导致：
背景： 线性梯度（＃17177C 0 0）50％/34％8％空间无重复， 线性级别（＃17177C 0 0）50％/8％34％无重复空间；
A CSS变量优化了这一点：
-_ g：线性级别（＃17177C 0 0）50％; / *在这里更新颜色 */ 背景： var（ - _ g）/34％8％空间无重复， var（-_ g）/8％34％无重复空间；
这产生了四个条。 CSS变量简化了颜色更新。
.loader元素及其::before创建了四个条，总计八个。
.loader {
宽度：150px; / *控制大小 */
方面比例：1;
显示：网格；
}
.loader，
.loader :: {
-_ g：线性级别（＃17177C 0 0）50％; / *在这里更新颜色 */
背景：
var（ - _ g）/34％8％空间无重复，
var（-_ g）/8％34％无重复空间；
}
.loader :: {
内容： ””;
变换：旋转（45维格）;
} display: grid确保伪元素覆盖父母的区域，从而消除了对明确维度的需求。
将伪元素旋转为45度元素，将其余的棒旋转。
使用带有conic-gradient的CSS mask实现了单杆离开褪色小径的效果：
面具：锥形学位（来自22DEG，＃0003，＃000）;
该梯度逐渐提高透明度。应用于装载机，会产生褪色的棒幻觉。每个栏似乎由于掩盖而逐渐消失，从而产生了不同不透明度的印象。
使用steps(8) （其中8是条的数量）的阶梯动画创建旋转：
.loader {
动画：加载3S步骤（8）无限；
}
@keyframes load {
到{变换：旋转（1Turn）}
}这完成了单元素，最小CSS加载器。尺寸和颜色很容易控制。添加A ::after可以扩展到十二个条，并进行较小的代码调整。使用不同的梯度和不透明度技术，也可以实现替代实现。
使用径向梯度代替线性梯度，创建基于DOT的加载器是相似的。掩盖不透明度的核心概念保持不变，但形状是圆圈。 Safari兼容性可能需要调整梯度。
使用各种技术（梯度，面具，伪元素）显示了其他几个旋转器加载器。这些是理解不同方法的练习。
使用一个div ，梯度，伪元素和变量，可以创建各种旋转装载机。这些示例在根本上是相似的，并且进行了较小的修改。这仅仅是开始。该系列将探索更高级的CSS加载器技术。
以上是单元素加载器：旋转器的详细内容。更多信息请关注PHP中文网其他相关文章！
