仅需 1.5KB 即可制作背景斑点动画：分步指南
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
今天我们将向您展示如何创建这种背景动画。
它给人一种斑点随机变形的错觉。但实际上，我们只是用 CSS 旋转了四个静态的 SVG 图形。
步骤 1：创建形状
首先，我们绘制形状。我用的是 Illustrator，但任何支持导出 SVG 格式的矢量编辑器都可以。
首先创建一个正方形画布。我这里是 100 x 100 像素，但由于我们要制作的是 SVG 图像，它可以缩放以适应任何屏幕尺寸而不会损失质量。因此，像素大小并不重要。
你需要两对圆形图形。图形的数量并不重要；它们只需要是圆形，并且能够很好地被视口裁剪即可。
此外，在中心点添加圆。这些圆不会保留在最终图像中；它们只是为了方便获取形状旋转的原点坐标而添加的。
我们目前不需要考虑样式和颜色。我们只需要从 Illustrator 中提取形状。所以，让我们将整个图像导出为 .svg 文件。
步骤 2：准备 SVG 代码
以下是 Illustrator 导出的 SVG 代码：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="13.2" cy="25.6" r="1.6" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="84.7" cy="93.3" r="1.7" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
根据您使用的图形编辑器和导出设置，代码可能看起来有所不同。无论如何，我们需要清理代码，移除所有从图形编辑器继承的样式。唯一需要保留的元素是：
- 属性
viewBox<svg> <path>斑点及其d属性的4 个元素- 2 个附加
<circle>元素
一旦我们有了最简代码，就可以将其嵌入到 HTML 页面中，并将图像设置为全屏显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Ksenia Kondrashova">
<style>
svg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
<path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
<path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
<path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
<circle cx="13.2" cy="25.6" r="1.6" />
<circle cx="84.7" cy="93.3" r="1.7" />
</svg>
</body>
</html>
下一步是给元素添加颜色和类名。顺便感谢coolors.co提供的精美随机调色板。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="#9b5de5" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
<path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
<path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
<path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
</svg>
我保持<svg>背景透明，这样就可以将页面背景设置为黄色。或者，我们也可以将background-color黄色svg添加到图像中。我们在处理颜色方面非常灵活。
body {
background-color: #fee440;
}
步骤 3：为形状添加动画
下一步是<path>使用 CSS 为元素添加动画效果。这可以通过在<svg>标签外添加常规 CSS 代码，或者直接在 SVG 代码中插入CSS<style>代码段来实现。我选择插入 CSS 代码段，这样可以保持代码结构更简洁，并且可以将动画保存为单独的 .svg 文件。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<style>
</style>
</defs>
...
</svg>
四个形状将沿同一方向无限循环旋转。因此，我们只需要一个旋转函数keyframes，即可实现从 0 度到 360 度的旋转。
这四个物体的移动速度都很慢，但速度各不相同。因此，对于每个物体，我们只改变动画持续时间和起始位置。
我们使用圆的坐标（具体来说，cx是其cy属性）来确定原点。完成后，我们可以删除这些圆。
<style>
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.out-top {
animation: rotate 20s linear infinite;
transform-origin: 13px 25px;
}
.in-top {
animation: rotate 10s linear infinite;
transform-origin: 13px 25px;
}
.out-bottom {
animation: rotate 25s linear infinite;
transform-origin: 84px 93px;
}
.in-bottom {
animation: rotate 15s linear infinite;
transform-origin: 84px 93px;
}
</style>
...
// turns to transform-origin: 13px 25px
<circle cx="13.2" cy="25.6" r="1.6" />
// turns to transform-origin: 84px 93px
<circle cx="84.7" cy="93.3" r="1.7" />
以像素为单位设置原点可能会让人困惑。实际上，这些值与屏幕像素无关，而是与 SVG 的内部坐标系相关，该坐标系是一个我们在 Illustrator 中创建的 100 x 100 像素大小的画布。再次强调，SVG 可以缩放到任何屏幕尺寸，因此使用像素作为原点仅仅是 CSS 语法的问题。
动画制作完成！
步骤 4：设置响应能力
让我们在浏览器中打开页面，并尝试不同的屏幕比例。默认情况下，SVG 会viewBox通过在两侧添加额外空间来保持整个图形始终可见。这样，我们就能清晰地看到旋转的圆形图形。
相反，我们希望裁剪图像，使斑点只部分可见。这可以通过preserveAspectRatio="xMidYMid slice"属性轻松实现。
搞定！动画可以内嵌显示，也可以保存到外部的blob.svg文件中。即使不压缩，文件大小也只有 1.5kb 左右，非常棒 😎
在CodePen上尝试编写代码，或者观看本教程的视频版本！