后端开发教程 - Java、Spring Boot 实战 - msg200.com
仅需 1.5KB 即可制作背景 Blob 动画：分步指南
今天我们将向你展示如何创建这个背景动画
它给人一种斑点随机变形的错觉。但实际上，我们只是用 CSS 旋转了四个静态 SVG 形状。
步骤 1：创建形状
首先，我们画一些形状。我用的是 Illustrator，不过任何支持 SVG 导出的矢量编辑器都可以。
首先创建一个方形画布。我的尺寸是 100 x 100px，但由于我们制作的是 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>- 4 个
<path>Blob 元素及其d属性 - 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 代码中插入一段<style>CSS 代码来实现。我插入 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上玩代码或查看本教程的视频版本！