如何使用纯CSS实现抛盒子的Loader
在网页开发中，加载动画是提升用户体验的重要细节。一个生动有趣的加载动画，可以缓解用户等待时的焦虑感。“抛盒子”Loader 是一种经典的加载动效，它模拟了多个小方块被依次抛起、滞空、落下的物理效果，视觉上轻快且富有节奏感。本文将从零开始，一步步拆解如何用纯 CSS 实现这一效果。
抛盒子动画的核心原理
“抛盒子”动画的本质，是利用 CSS 的 @keyframes 规则定义一系列关键帧，通过改变元素的 transform 属性（主要是 translateY 和 scale）来模拟盒子的抛落运动。具体来说，需要处理三个阶段：上升（盒子被抛出）、滞空（到达最高点，短暂停顿）、下落（盒子落回原点并产生轻微的挤压变形）。
为了让动画更自然，我们通常会加入 缓动函数（如 ease-in-out、cubic-bezier）来控制速度变化，并利用 animation-delay 让多个盒子依次启动，形成错落的节奏感。
基础实现：单个盒子的抛起与落下
我们先从最基础的单个盒子做起，理解完整的运动周期。下面的示例定义了一个 @keyframes 名为 bounce，它让盒子在垂直方向上完成一次抛落循环，并在落地瞬间做一个轻微的 scaleY 压缩来模拟弹性触地。
@keyframes bounce {
0% {
transform: translateY(0) scaleY(1);
}
30% {
transform: translateY(-150px) scaleY(1);
}
50% {
transform: translateY(-150px) scaleY(1);
}
80% {
transform: translateY(0) scaleY(1.1);
}
100% {
transform: translateY(0) scaleY(1);
}
}
.box {
width: 40px;
height: 40px;
background-color: #3498db;
border-radius: 4px;
animation: bounce 1.2s ease-in-out infinite;
}这段代码中：
- 0% 盒子在起始位置，无变形。
- 30%~50% 盒子上升到最高点并悬停片刻。
- 80% 盒子落回地面，
scaleY(1.1)模拟触地挤压。 - 100% 恢复原状，完成一次循环。
将 infinite 设置为动画循环次数无限，即可一直播放。
进阶实现：多个盒子的交错抛落
经典的抛盒子 Loader 通常由 3~5 个小方块组成，它们依次被抛出，形成类似接力赛的视觉效果。实现这种效果的关键在于使用 animation-delay 为每个盒子设置不同的启动延时。
以下是一个完整的 HTML + CSS 实现，包含 4 个并排的盒子，它们依次抛起，节奏均匀。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>抛盒子 Loader</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
.loader {
display: flex;
gap: 8px;
align-items: flex-end;
height: 200px;
}
/* 所有盒子的公共样式 */
.loader .box {
width: 40px;
height: 40px;
background-color: #3498db;
border-radius: 6px;
animation: throw 1.4s ease-in-out infinite;
transform-origin: bottom center;
}
/* 为每个盒子设置不同的延时 */
.loader .box:nth-child(1) {
animation-delay: 0s;
background-color: #e74c3c;
}
.loader .box:nth-child(2) {
animation-delay: 0.15s;
background-color: #f39c12;
}
.loader .box:nth-child(3) {
animation-delay: 0.3s;
background-color: #2ecc71;
}
.loader .box:nth-child(4) {
animation-delay: 0.45s;
background-color: #3498db;
}
/* 定义抛落关键帧 */
@keyframes throw {
0% {
transform: translateY(0) scaleY(1);
}
25% {
transform: translateY(-140px) scaleY(1);
}
45% {
transform: translateY(-140px) scaleY(1);
}
70% {
transform: translateY(0) scaleY(1.15);
}
85% {
transform: translateY(0) scaleY(0.95);
}
100% {
transform: translateY(0) scaleY(1);
}
}
</style>
</head>
<body>
<div class="loader">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在上面的代码中，我们通过 nth-child 选择器为每个 .box 设置了不同的 animation-delay，从 0s 开始，每个递增 0.15s。同时，每个盒子使用了不同的背景色，让视觉层次更清晰。@keyframes throw 中增加了落地后的 scaleY(0.95) 回弹效果，模拟盒子落地后微弱的反弹，让动画更具弹性感。
优化与变体
在基础效果之上，我们可以做很多有趣的优化和变体：
1. 调整缓动函数让运动更自然
使用 cubic-bezier 可以精确控制抛起和下落的加速度。例如上升快、下落慢，或者反过来。推荐使用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 这样接近物理真实的值。
2. 增大盒子间距或改变排列方向
将 flex-direction 改为 column 可以让盒子纵向排列，或者增大 gap 让抛落幅度更夸张。还可以让盒子在不同方向上平移（结合 translateX），形成抛物线轨迹。
3. 添加透明度或颜色渐变
在 @keyframes 中同时改变 opacity 或 background-color，让盒子在上升时变淡、下落时变深，增加动效的细腻感。
4. 使用自定义属性简化代码
如果盒子数量较多，可以使用 CSS 自定义属性（--delay）配合 calc() 来计算延时，省去手动书写多个 nth-child 的麻烦。
.loader .box {
--delay: 0s;
animation-delay: var(--delay);
}
/* 在 HTML 中通过 style 属性设置每个盒子的延时 */
/* <div class="box" style="--delay: 0s;"></div> */
/* <div class="box" style="--delay: 0.15s;"></div> */
/* 以此类推 ... */性能与兼容性说明
上述动画仅使用了 transform 和 opacity 属性，这些属性不会触发浏览器的重排（reflow）和重绘（repaint），只会触发合成（composite），因此性能非常好，即使在移动设备上也能流畅运行。所有现代浏览器（Chrome、Firefox、Safari、Edge 等）均支持 @keyframes 和 animation 相关属性，无需添加浏览器前缀。
结语
通过纯 CSS 实现“抛盒子”Loader，不仅能够锻炼我们对关键帧动画和变换属性的理解，还能在不引入任何 JavaScript 的情况下，创造出富有动感的交互反馈。你可以根据项目风格自由调整盒子的颜色、大小、抛落幅度和节奏，打造独一无二的加载动效。希望本文的示例能为你提供清晰的思路和实用的代码基础。