只用一个div来构建你的CSS Loading - The Dots

![2vhnxjmn7qgmeecr23xp.gif][1]

是的，又是一篇关于CSS Loading的文章，但这一次你将构建Loading在这篇文章中，我将与你分享一些我用来构建一些Loading的技巧。

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

**不全是**。在本教程中，你将拥有。
✔️ 一个div
✔️一个@keyframes
✔️没有延迟，没有复杂的时间计算
✔️我们不会做一个动画，而是使用相同的代码结构做许多动画。
不枯燥，因为这篇文章在你还没来得及眨眼时就会结束。

----------

**1) 建立圆点**
-----------

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

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

其逻辑很简单。我创建了一个大小为30x30的背景层，放在顶部的中心位置，我禁止重复，只有一个实例。该层是一个有两种颜色的径向梯度()，currentColor是你在颜色属性中定义的颜色（对以后更新点的颜色很有用）和一个透明的颜色（我在这里使用红色来清楚地看到梯度层的限制）。

farthest-side允许我考虑最远的一边作为我的百分比参考，因为我们处理的是一个正方形的渐变（30x30），所有的边都是最远的一边，所以通过使用currentColor 100%，我画了一个接触边的圆。

但你使用的是90%，而不是100%！这是真的。
是的，这是因为渐变不是抗锯齿的，所以我们必须考虑一个较小的值来获得一个平滑的边缘。

下面是90%和100%的区别
![7hqht9ipb930t5002aa4.png][4]

这就是全部! 现在，我们有了我们的点，让我们把它做成动画。

----------

**2) 使点成为动画**
-------------

为了使点成为动画，我们简单地使背景位置成为动画。让我们创建一个@keyframes来更新从顶部中心到底部中心的位置。

我们的代码将变成（[演示链接][5]）。

```
.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}
}
```

现在你可以给一个点做动画了。你所要做的就是把位置更新为你想要的样子。
对于任何不熟悉背景位置的人，我强烈建议阅读我以前的文章，更确切地说，是关于百分比值的部分。
以后，我将考虑百分比值，而不是像顶部中心这样的关键词（相当于50% 0）。在我之前的文章中，我给出了所有的等价物。

----------

**3) 添加更多的点**
-------------

要添加更多的点，我们只需添加更多的div，并将其放在彼此的旁边。然后每一个将有一个背景层和它自己的@keyframes动画等

***当然，不!***
-----

要添加更多的点，我们只需添加更多的背景层。我们可以有任意多的图层，所以一个div可以容纳很多的点。

让我们用2个来试试（[演示链接][6]）。

```
.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}
}
```

一个点将从左上角到左下角的动画，另一个从右下角到右上角的动画。就这么简单!

注意，我只保留了一个背景尺寸，因为我所有的点都会有相同的尺寸。

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

```
.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) 创建loading**
------------

要建立loading，你首先需要一支笔和一张纸。是的，我不是在开玩笑。人们往往跳进他们最喜欢的代码编辑器，开始写代码，试图在他们的头脑中想象事情应该如何运作。不，不，它不会那样工作。

你要把一切都写在纸上，然后把它转化为代码。

**第1步：定义你的结构**

在这一步，我们决定点的数量，它们的大小，间隙，等等。

因此，让我们假设我将使用4个大小为20x20的点，间隙为5px。这将给我一个95px的总宽度。我不希望它们跳得很厉害，所以让我们的高度为40px。

![cf161ukquhp78mswusxy.jpeg][8]

**第2步：编写代码**
我们把在（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;
}
```
不要担心你目前得到的结果。你将只看到一个点，因为所有的点都在彼此的上方。我们还没有定义任何背景-位置。

**第三步：建立你的时间线**

在这一步，你需要用你的想象力来定义完整动画的每一帧。画出你心目中的动画的一步步图示。

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

![g1evqjld8qtkg4cqpu57.jpeg][9]

我有9个框架，重要的是要注意最后一个框架与第一个框架相同，以便有一个连续的动画。

第4步：将时间线转换为背景位置

现在你有了你的图画，简单地定义每一帧的背景位置。对于每个点，我们有一个固定的X坐标，只有Y会改变。

对于X，我们有以下值。0%, 33%, 66%, 100%. 这不是很直观，所以让我们使用另一种语法：calc(0*100%/3), calc(1*100%/3), calc(2*100%/3), calc(3*100%/3)。逻辑很简单：N个点，所以我们从0到N-1循环，然后我们除以N-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%}
}
```

乍看之下可能很复杂，但其实很简单。在每一帧内，我定义每个点的位置。X始终是相同的，我把Y从0（顶部）更新到100%（底部）。

我们有了我们的@keyframes!

**第5步：找到关键帧的百分比**

最后一步是用百分比值填充? 我们有9个框架，所以我们考虑8个（总是N-1），我们用100%除以8，得到12.5%。我们从0%开始，按12.5%递增，直到达到100%。

你已经完成了!
现在把所有东西放在一起~~~。
```
.dot {
  margin:20px auto;
  color:darkblue;
  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;
  animation: m 1s infinite;
}

@keyframes m {
  0%   {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  12.5%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  25%  {background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 100%, calc(3*100%/3) 100%}
  37.5%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 100%}
  50%  {background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  62.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  75%  {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0   , calc(3*100%/3) 0   }
  87.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0   }
  100% {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
}
```

[1]: http://guobacai.com/usr/uploads/2021/10/1255653393.gif
  [2]: http://guobacai.com/usr/uploads/2021/10/1255653393.gif
  [3]: https://codepen.io/t_afif/pen/abwLoxx
  [4]: http://guobacai.com/usr/uploads/2021/10/2671890697.png
  [5]: https://codepen.io/t_afif/pen/abwLOpj
  [6]: https://codepen.io/t_afif/pen/KKqXdgB
  [7]: https://codepen.io/t_afif/pen/BaZwoZJ
  [8]: http://guobacai.com/usr/uploads/2021/10/1073779996.jpeg
  [9]: http://guobacai.com/usr/uploads/2021/10/3036073383.jpeg

只用一个div来构建你的CSS Loading - The Dots

评论已关闭