仅使用一个 div 构建 CSS 加载器 — The Dots

是的，又一篇关于 CSS 加载器的文章，不过这次你要自己动手构建加载器！在本文中，我将与你分享一些我构建加载器时用到的技巧。

如果你错过了，我创建了一个包含500 多个单 div 加载器的集合，其中包含 50 个加载点。我们将看到其中一些加载器背后的神奇之处！

创建加载点的技巧有很多。我将重点介绍我最喜欢的一种，即radial-gradient背景动画。

好吧，又一个无聊的教程，我们将有大量的代码、复杂的`@keyframes`和疯狂的动画延迟，对吧？

完全没有。在本教程中你将学习：

✔️ 一个 div
✔️ 一个@keyframes
✔️ 无延迟，无复杂的时间计算
✔️ 我们不会制作一个动画，而是使用相同的代码结构制作许多动画
✔️ 不会无聊，因为这篇文章会在你眨眼之前结束

1）构建点

我们首先使用以下代码创建一个点（演示链接）：

.dot {
  background:radial-gradient(farthest-side,currentColor 90%,red);
  background-size:30px 30px;
  background-position:top center;
  background-repeat:no-repeat;
}

逻辑很简单：我创建一个大小等于的背景图层，30x30放置在处top center，并禁用重复，使其只有一个实例。该图层有radial-gradient()两种颜色：，currentColor它是您在属性中定义的颜色color（稍后用于更新点的颜色），以及一种transparent颜色（我在这里使用红色来查看渐变图层的边界）。

farthest-side允许我将最远的边作为百分比参考，并且由于我们正在处理方形渐变（30x30），所有边都是最远的边，因此通过使用currentColor 100%，我绘制了一个接触边的圆圈。没有像66%或这样的复杂值72.5%。

但您使用的是 90%，而不是 100%！

确实如此，这是因为渐变不具有抗锯齿功能，所以我们必须考虑较小的值以获得平滑的边缘。

以下是 90% 和 100% 之间的差异

就这样！现在，我们有了圆点，让我们给它添加动画吧。

2）动画圆点

要为点添加动画效果，我们只需为添加动画效果background-position。让我们创建一个@keyframes，将位置从更新top center到bottom center

我们的代码将变成（演示链接）：

.dot {
  background:radial-gradient(farthest-side,currentColor 90%,#0000);
  background-size:30px 30px;
  background-position:top center;
  background-repeat:no-repeat;
  animation:m 1s infinite alternate;
}
@keyframes m{
  to {background-position:bottom center}
}

我认为以上内容是不言而喻的

我们也可以像下面这样转换代码。这将使后续步骤更容易。

.dot {
  background:radial-gradient(farthest-side,currentColor 90%,#0000);
  background-size:30px 30px;
  background-repeat:no-repeat;
  animation:m 1s infinite alternate;
}
@keyframes m{
  0%   {background-position:top    center}
  100% {background-position:bottom center}
}

现在你可以为一个点添加动画效果了。你需要做的就是将位置更新到你想要的位置。

对于不熟悉的人background-position，我强烈建议阅读我之前的文章，更准确地说是讨论百分比值的部分。

稍后，我将考虑使用百分比值来代替诸如top center（相当于50% 0）之类的关键字。在我之前的文章中，我给出了所有等价关系。

3）添加更多点

要添加更多圆点，我们只需添加更多相邻的 div。这样，每个 div 都会有一个背景层和各自的@keyframes动画，并且……

当然不行！

要添加更多圆点，只需添加更多背景图层即可。我们可以添加任意数量的图层，所以一个 div 就能容纳很多圆点！

让我们尝试 2（演示链接）：

.dot {
  background:
    radial-gradient(farthest-side,currentColor 90%,#0000),
    radial-gradient(farthest-side,currentColor 90%,#0000);
  background-size:30px 30px;
  background-repeat:no-repeat;
  animation:m 1s infinite alternate;
}
@keyframes m{
  0%  {background-position:top    left,bottom right}
  100%{background-position:bottom left,top    right}
}

一个点将从到动画top left，bottom left另一个点将从bottom right到动画top right。就这么简单！

请注意，我只保留一个，background-size因为所有点都具有相同的大小。

让我们使用 CSS 变量和百分比值来优化代码（演示链接）：

.dot {
  --d:radial-gradient(farthest-side,currentColor 90%,#0000);
  background:var(--d),var(--d);
  background-size:30px 30px;
  background-repeat:no-repeat;
  animation:m 1s infinite alternate;
}
@keyframes m{
  0%  {background-position:0 0   ,100% 100%}
  100%{background-position:0 100%,100% 0   }
}

变量--d将避免重复相同的渐变语法。对于百分比值，这更多的是一种偏好，而不是优化。对我来说，处理值比处理关键字更容易。

你已经眨眼了吗？

没问题，我们快完成了。我们已经准备好了构建任何类型加载点所需的所有要素。

4）创建加载器

要构建加载器，首先需要一支笔和一张纸。是的，我没开玩笑。人们往往会打开自己喜欢的代码编辑器，开始编写代码，在脑子里想象代码应该如何运行。不，不，这样不行。

你把所有东西都写在纸上，然后将其翻译成代码。

步骤 1：定义结构

在此步骤中，我们决定点的数量、大小、间隙等。

假设我将使用 4 个点，20x20每个点的大小为，间距为5px。这样一来，总宽度为95px。我不希望它们跳跃太多，所以高度为40px

第二步：编写代码

我们将 (1) 中定义的内容转换为代码：

.dot {
  width:95px;
  height:40px;
  --d:radial-gradient(farthest-side,currentColor 90%,#0000);
  background:var(--d),var(--d),var(--d),var(--d);
  background-size:20px 20px;
  background-repeat:no-repeat;
}

不用担心目前得到的结果。你只会看到一个点，因为它们都上下重叠。我们background-position还没有定义任何点。

步骤 3：建立时间表

在此步骤中，你需要运用想象力来定义完整动画的每一帧。绘制一幅你心中动画的分步示意图。

这里有一个例子，我的动画会将所有点从底部逐个移动到顶部，然后将它们移回底部。

我有 9 帧，需要注意的是，最后一帧与第一帧相同，以形成连续动画。

步骤 4：将时间线翻译background-position成

现在你已经绘制好了，只需background-position为每一帧定义。对于每个点，我们都有一个固定的X坐标，只有Y会改变。

对于 X，我们有以下值：0%，，，，。不是很直观，所以让我们使用另一种语法：，，，，。逻辑很简单：点，所以我们从到循环33%，然后除以。66%100%calc(0*100%/3)calc(1*100%/3)calc(2*100%/3)calc(3*100%/3)N0N-1N-1

我们的动画代码是：

@keyframes m {
  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 100%}
  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0   }
  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
}