你的代码实现了一个 方形轨迹预加载动画（Preloader Animation），其中三个 span 元素沿着一个 2×2 网格 轨迹循环移动。现在，我们将 拆解核心实现步骤，让你能一步步理解并调整动画效果。
第 0 步：项目概览
你的代码包括：
preloader-animation/├── index.html # HTML 结构└── style.css # CSS 样式与动画
动画效果
- 三个小方块（白色） 会沿着一个 150×150 px 的方形路径 依次运动。
- 每个方块有时间间隔 (
animation-delay)，因此它们不会同时移动，而是像“追逐”一样依次运行。 - 背景色为紫色 (
#bd2ae2)，小方块的移动形成视觉上的“旋转追逐”效果。
第 1 步：HTML 结构
打开 index.html，可以看到一个 .loader 容器，包含 3 个 <span>，它们将用来进行动画。
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Preloader Animation</title>
</head>
<body><div class="loader"><span></span> <!-- 第1个方块 --><span></span> <!-- 第2个方块 --><span></span> <!-- 第3个方块 --></div>
</body>
</html>
HTML 解析
<div class="loader">：动画的容器，所有span都在其中运行。- 三个
<span>：分别代表 三个方块，每个都使用animation-delay让它们 依次运动。
第 2 步：基础 CSS
2.1 背景 & 居中
在 style.css 里，body 采用 flexbox 居中显示：
body {margin: 0;padding: 0;background: #bd2ae2; /* 紫色背景 */display: flex;align-items: center;justify-content: center;height: 100vh; /* 全屏 */
}
display: flex; align-items: center; justify-content: center;：让.loader垂直 & 水平居中。
2.2 .loader 容器
.loader {width: 150px;height: 150px;position: relative;
}
width: 150px; height: 150px;：定义了动画运动的区域，即span运动的轨迹将在 150×150 px 的范围内。position: relative;：用于让span进行绝对定位。
2.3 方块样式
span {position: absolute;width: 50px;height: 50px;background-color: white;border-radius: 4px;animation: chase 2s linear infinite;
}
width: 50px; height: 50px;：每个span大小固定 50×50 px。position: absolute;：使它们相对.loader进行绝对定位，可以自由控制top和left。border-radius: 4px;：让方块稍微圆润。animation: chase 2s linear infinite;：绑定chase动画，2 秒一轮，线性匀速运动，循环播放。
第 3 步：动画关键帧
关键部分——让 span 沿着 2×2 网格轨迹 运动：
@keyframes chase {0% { top: 0; left: 0; }12.5% { top: 0; left: 50%; }25% { top: 0; left: 50%; }37.5% { top: 50%; left: 50%; }50% { top: 50%; left: 50%; }62.5% { top: 50% ; left: 0; }75% { top: 50% ; left: 0; }82.5% { top: 0; left: 0; }100% { top: 0; left: 0; }
}
如何理解这个轨迹
小方块沿着 150×150 px 的区域，在 4 个角落 依次停留：
- 0%：起点（左上角）。
- 12.5% - 25%：向 右上角 运动，并停留一会。
- 37.5% - 50%：向 右下角 运动，并停留。
- 62.5% - 75%：向 左下角 运动，并停留。
- 82.5% - 100%：返回 左上角，然后继续循环。
第 4 步：设置动画时间延迟
span:nth-child(2) {animation-delay: 0.7s;
}span:nth-child(1) {animation-delay: 1.4s;
}
作用
nth-child(2)让第二个方块比第一个 晚 0.7 秒 开始。nth-child(1)让第三个方块比第一个 晚 1.4 秒 开始。
结果
- 第 1 个方块：立即开始运动。
- 第 2 个方块：0.7 秒后才开始 跟随第 1 个方块运动。
- 第 3 个方块：1.4 秒后才开始 跟随第 2 个方块运动。
最终，这三个方块会依次沿着 4 个角落运动，形成 追逐的视觉效果。
第 5 步：优化与拓展
-
调整运动轨迹
- 如果想让方块沿 圆形路径 运动，可以改用
transform: translate(X, Y);来计算圆周坐标。
- 如果想让方块沿 圆形路径 运动，可以改用
-
改变颜色
span:nth-child(1) { background-color: #ff3d00; } span:nth-child(2) { background-color: #ffcc00; } span:nth-child(3) { background-color: #4caf50; }- 让每个方块使用 不同颜色，增加视觉变化。
-
修改大小与间距
.loader {width: 200px;height: 200px; } span {width: 40px;height: 40px; }- 让
.loader更大，同时缩小span，看起来更流畅。
- 让
最终效果
- 背景紫色，居中的
.loader容器。 - 三个白色小方块 依次运动，形成 追逐动画。
- 每个方块间隔 0.7 秒启动，制造流畅的运动感。
总结
absolute + animation + keyframes结合实现 轨迹运动。animation-delay让方块 依次启动，形成流畅追逐效果。box-model + flexbox保证 全屏居中。
你可以自由调整轨迹、颜色、间隔时间，创造更多 酷炫的 Preloader 动画！ 🚀
