动画 CSS 加载器

我们来聊聊我最近制作的一组 CSS 加载器/旋转动画。简单介绍一下它们的设计理念和技术细节。

这里提供了一组加载器及其源代码，全部用纯 HTML 和 CSS 编写。目的是让任何略懂 CSS 的人都能轻松阅读，并希望能够启发您自己也编写一个加载器。

它们被重新排列是为了更好地展示，而不是按顺序排列的。

简报

有了这套素材，我想做一些由两个点组成的动态动画，并结合更高级、更复杂的3D透视动画，这种动画需要一些技巧才能达到视觉效果。

我面临的首要限制是必须使用单个 HTML 元素来实现这些功能。这样才能方便地将它们应用到项目中，而不会使代码过于复杂，从而使它们更具实用性。

其次，如果不使用 SCSS 或 SASS，我就无法进行大量的硬编码，也无法使用循环处理多个元素。我主要通过使用 CSS 自定义属性来缓解这个限制。CSS 自定义属性与 SASS 变量不同，它们不是静态的。它们会根据上下文动态变化，这一点你可以在这组示例中看到。一个很好的例子是 ` --loader-size-half<div>` loader--7。只需设置 `<div>` --loader-size，--loader-size-half它就是一个calc基于 `<div>` 的抽象函数--loader-size，也会相应地更新其值。

这组元素主要由正方形和圆形组成，因此它们的高度和宽度始终相同。我没有手动设置宽度和高度，而是选择使用相对较新的 CSS 属性 `width` aspect-ratio。只需设置`width` 的width值，并将 `width` 的aspect-ratio值设置为 `0` 1 / 1，即可将元素变成正方形。最后，将 ` width` 和 `height` 的值border-radius设置为 `50%`，即可将任何宽度和高度相等的元素变成圆形。

.loader 类

.loader {
  --loader-size: calc(var(--block-size) / 2);
  --loader-size-half: calc(var(--loader-size) / 2);
  --loader-size-half-neg: calc(var(--loader-size-half) * -1);
  --light-color: rgba(255, 255, 255, 0.3);
  --dot-size: 5px;
  --dot-size-half: calc(var(--dot-size) / 2);
  --dot-size-half-neg: calc(var(--dot-size-half) * -1);

  display: block;
  position: relative;
  width: var(--loader-size);
  display: grid;
  place-items: center;
  color: white;
}

这是所有加载器的基类。在这个类中，我声明了一些可以应用于所有加载器并可重复使用的自定义 CSS 属性。

.loader {
  --loader-size: calc(var(--block-size) / 2);
  --loader-size-half: calc(var(--loader-size) / 2);
  --loader-size-half-neg: calc(var(--loader-size-half) * -1);
  --light-color: rgba(255, 255, 255, 0.3);
  --dot-size: 5px;
  --dot-size-half: calc(var(--dot-size) / 2);
  --dot-size-half-neg: calc(var(--dot-size-half) * -1);
}

• 基础装载机尺寸是方块尺寸的一半，容器
• --loader-size-half是一个calc计算加载器大小一半的函数，可以通过设置加载器大小值来实时更新。
• --loader-size-half-neg就是将装载机尺寸的一半乘以 -1，得到负数。
• 浅色是一种可以在许多场合使用的通用颜色。
• 点的大小是指每个小白点的大小，设置为 5px。

每个加载器内部的元素默认使用以下两行代码居中显示：

.loader {
  display: grid;
  place-items: center;
}

该基类中还设置了所有元素的颜色color: white，该基类设置了值，currentColor并且可以在所有其他类中使用。

position: relative设置为使子元素（::before 和 ::after 伪元素）position: absolute锚定到它。

点

它们由每个加载器元素的伪元素构成::before。::after每个 HTML 元素实际上包含两个子元素和一个父元素。很多时候，我们可以使用伪元素来创建这些展示元素。您可以在 MDN 上阅读更多相关内容。

你会注意到，大多数其他元素都设置为vminvalue 而不是pxvalue，但 dot 元素不同。valuevmin直接与视口大小关联，而pxis 则不然。理想情况下，dot 元素的大小vmin也应该与视口大小关联，但为什么没有呢？

这主要是为了确保每个点相对于其所在线条的位置精确。最终，当图像渲染到屏幕上时，屏幕上px最小的图形是固定大小的。线条的大小是固定的，因此点的大小也必须与之匹配，才能使其精确地居中位于线条上。您可以将点的值更改为任何值来查看我的意思。px1px1px5pxvmin

带圆点的加载指示器在视觉上可以适应 4px 到 6px 的尺寸。那么为什么要用 5px 呢？这样才能让它居中放置在页面上。也就是说，顶部 2px，居中放置在页面上 1px，底部 2px。这正是我们为了实现像素级精准布局而需要进行的计算。

动画

为了保持加载动画之间的独立性和完整性，即使某些加载动画使用了相同的关键帧，每个加载动画也都声明了一组关键帧。在每个加载动画内部，通过应用自定义 CSS 属性来复用这些关键帧。您可以在加载动画 5、6、8 和 9 中看到它们的实际效果。

这组加载动画中使用的大多数动画都是简单的平移（沿 x、y、z 轴移动）和旋转，但通过不同的缓动和延迟设置使其变得有趣/独特。

每个动画中的对象（即这些点）实际上都在做相同的运动，只是一个点比另一个点早一些。这是通过简单地animation-delay为其中一个点设置一个延迟来实现的。我没有设置正延迟（这会导致其中一个元素在动画开始前暂停一段时间），而是使用了负延迟。这样，元素就可以提前而不是延后执行动作，从而跳过初始的暂停，同时又能产生延迟差异。

说到缓动效果，我其实并不精通贝塞尔曲线的计算。我首先会构思一个大致的效果，比如“生硬”、“弹跳”、“平滑”等等，然后在开发者工具的缓动编辑器里反复尝试，最终找到适合动画的缓动效果。例如，对于加载动画 7，我使用了略微“弹跳”的缓动效果，让小点能够跳出线性曲线再返回。而大多数其他加载动画则只是简单地使用“生硬”的缓动效果。

结论

以上就是我分享的关于这套加载器的设计思路和一些技术细节。希望你能从中学习到一些 CSS 技巧，并激发你创作自己的加载器。也欢迎你在项目中使用其中的任何元素。如果能看到这套加载器的实际应用，我会非常高兴。祝你创作愉快！