单元素加载器：旋转器

制作仅CSS的装载机是一个有意义的挑战。令人着迷的无限动画总是令人满意的。 Codepen展示了各种各样的技术，但是本文的重点是实现具有最小代码的单元素加载程序。

我已经开发了超过500个单div加载器，这个四部分系列共享了所使用的技术。我们将探讨众多示例，展示微妙的调整如何产生不同的结果以及代码的简洁程度。

单元素装载机系列：

1. 单元素加载器：旋转器 -您在这里
2. 单元素加载程序：点
3. 单元素加载程序：条
4. 单元素加载程序：前进3D

第一篇文章创建了一个常见的加载器模式：旋转栏。

方法

一种简单的方法使用多个元素（在这种情况下为九个元素），每个元素在父母内代表一个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加载器技术。

单元素装载机系列：

1. 单元素加载器：旋转器 -您在这里
2. 单元素加载程序：点
3. 单元素加载程序：条
4. 单元素加载程序：前进3D

以上是单元素加载器：旋转器的详细内容。更多信息请关注PHP中文网其他相关文章！