说起来，

说在前面

为什么要做这个动画？

当应用需要经历多个异步步骤时使用者往往会产生等待焦虑。老实说，一个直观的“开箱”动画可以：

• 让使用者看到每一步已开始并正在进行。从而降低不确定感，
• 用视觉节奏展示进度，让等待变得更有耐心；
• 把技术流程转化为易懂的故事，使产品体验更友好。

在线体验

CodePen Demo

在线链接的观点是，

掘金笔记

说到在线链接。

实现思路

整个效果可以拆成这几个关键步骤：

1. 用 CSS 3D 搭建盒子——底面 + 四面墙 + 盖子，组成一个真实的立方体。
2. 设计铰链结构——盖子挂在背面墙上，翻盖动画才符合物理直觉。
3. 流水线时间轴——四个盒子交错触发，形成依次开箱的节奏感。
4. 缓动函数打磨——盖子翻转用余弦缓动。墙壁展开加过冲回弹，图标弹出带弹性。其实，
5. 连接线和进度条——把各步骤串联成一条完整的流水线。

主要代码

3D 盒子的 DOM 结构

每个盒子由一个 scene> camera> box三层嵌套，里面放六个面：

&!--右墙 right -->

关键 CSS 就三行：

.step-scene {
perspective: 600px;/* 给子元素提供 3D */
}
.step-camera {
transform-style: preserve-3d;/* 保留子元素的 3D 变换 */
transform: rotateX rotateY;/* 固定的俯视角度 */
}
.box {
transform-style: preserve-3d;/* 盒子内部也要保持 3D */
}

perspective:600px 决定了“镜头离盒子多远”，值越小感越强。rotateX rotateY 则给了一个略微俯视的等距视角，让盒子看起来立体感刚好 👀。

用 JS 动态创建盒子的六个面

每个面的定位都靠 CSS transform 来“掰”到正确位置：

const SIZE = ... // 盒子尺寸
function createBoxElement {
const box = createElement;// 底面 —— 水平放倒
const floor = createFace;floor.style.transform = "rotateX";// 四面墙 —— 各自旋转到位
const front = createWall`);// 后半截省略
...

这里最巧妙的是 bakc.appendChild—'''''''盖子作为背面墙的子元素，并把旋转轴设在底边。老实说，这样当我们用 rotateX 翻转盖子时它就像真的被铰链连着一样翻开。而不是凭空旋转，

三种缓动函数让动画有“质感” 

这是整个效果的灵魂部分 🎨。一样是“从 A 到 B”，不同的缓动曲线会带来完全不同的感觉：


盖子翻开 –  开头慢、中间快、收尾慢。就像你掀盒子盖，先使点劲、中间自然甩开、最终缓缓到位 📦。
function lidEase{return )/...;老实说，}


`

墙壁展开 –  墙壁展开不是匀速倒下去。
而是快速展开后微微弹过头再回来。那句 * Math.sin 就是回弹幅度。即使只有 %，视觉上也能让动画瞬间活泼 ✨。
const t = -wallProgress
const eased = -t*t*t // …省略
const overshoot = eased + ... * Math.sin
const wallAngle = -... * overshoot

图标弹出 –  图标从盒里弹出来先慢后快再慢，像从弹簧上弹起；随后加微浮动，让图标停住时不僵硬，而是轻轻悬浮 🫧。
const popT=popRaw< //…省略
const popFloat=progress>=...?Math.sin*...)...


`

流水线时间轴编排 

四个盒子不是同时开的。而是依次触发，这就需要计算每个步骤的“出场时间”：
代码示例这方面，javascript
const STEP_DURATION=...;const gap=...;// ...
for{
const stepStart=i*;const stepProgress=clamp/STEP_DURATION);updateBox，话说回来，}
再看主要思想就是，把总进度切成几段，每段分配给一个步骤。`stagger` 控制步骤之间间距——间距大了像排队，小了像一窝蜂。当前配置让四个盒子依次触发，略有重叠，形成“流水线”的感觉 🏭。

动态着色 – 色相随进度走 

每个盒子的色相不同，并随开箱逐渐变化。让颜色更自然渐显：
javascript
const hue=...+i*...
function styleFace{
const sat=...+progress*...
const light=...-progress*...
face.style.background=`hsla`;}
\

连线填充动画 

步骤之间连线不是突然出现，而是从左向右流过去：
javascript
if{
const connStart=stepStart+STEP_DURATION*...
const nextStart=*
const connProgress=clamp/);steps.connectorFill.style.transform=`scaleX`;老实说，}
\

逐步拆解层级关系 
`├── timeline
│   ├── step
│   │   ├── step-scene
│   │   │   └── step-camera
│   │   │      ├── box
│   │   │      └── pop‑icon
│   │   ├── step-dot
│   │   └── step-label
│   ├── connector
├── progress-bar
└── progress-text`


循环机制简述 
\


javascript
const CYCLE=...;不过，//秒
const PAUSE=...;//秒
const TOTAL=CYCLE+PAUSE;

function animate{
requestAnimationFrame;const elapsed = now%TOTAL;const totalProgress=Math.min;// ，更新所有盒子和进度条…}
animate)，

适用场景 



AWS 初始化过程中的多步加载 –a real life example where users feel stuck waiting for each service call.
\r
\t\t\t\t

MVP 多步骤表单提交 –a clear visual cue that keeps users engaged.
\r
\t\t\t\t

文件上传与处理流程 –diminish uncertainty during long uploads.
\r
\t\t\t<\/ul>


源码地址 / 如何贡献？

 gitee.com/zheng_yongt…说起来，<\/span>\r
 github.com/yongtaozhen…<\/span>\r
<\/div>\r
\r
🌟 如果觉得帮助到了可以点星星~\r
🖊 有任何问题或错误请指出并 PR~ \r
📬 想实现更多功能或交流想法，请联系我~


* 这篇文章内容仅供学习交流使用 *


* 这篇文章内容仅供学习交流使用 *



* 这篇文章内容仅供学习交流使用 *











©2026