返回 Pack GalleryMotion Pack 14 · 工作流表面
进度步骤
在连续任务中，让已完成、当前步骤和下一步形成清晰节奏。
Publish checklistStep 1 of 3
33%- 1Content
- 2Review
- 3Release
实现一个三步进度流程：继续后，当前步骤变为完成，连接线延伸到下一步，右侧说明切换为新任务。使用 240ms 的顺序动作，避免同时让全部元素运动。
动效规则
完成标记先到位，连接线和新步骤随后接续。
减弱动效
直接更新步骤状态与进度文本。
实现
HTML、CSS 与行为所需的 JavaScript 一起复制。