你的代码实现了一个 方形轨迹预加载动画（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 动画！ 🚀