撒花彩带
Confetti
别名:撒花彩带动画庆祝特效五彩纸屑撒花庆祝
这是什么
完成关键动作后从一点爆出彩色纸屑飘落，用一次性高能量庆祝"做成了"。 只在里程碑出现：提交成功、任务完成、订阅达成—— 正因为稀有，才有庆祝的分量。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 里程碑完成（首次发布、支付成功、目标达成）
- 空状态被首次打破、成就解锁
- 品牌调性允许庆祝的 C 端产品
✕ 不适用场景
- 高频操作（每次保存都撒花即灾难）
- 严肃或专业工具界面
- 会遮挡关键结果信息的时机
常见形式
中心爆开
Burst
从按钮中心向外抛射，最常用
双侧礼炮
Cannons
左右两门礼炮对射，仪式感更强
顶部飘落
Rain
从顶部持续飘落数秒，覆盖感最强
实现要点
absolute particlesrandom transform translate/rotate@keyframes fallcleanup after animation用绝对定位的若干小块（div 或 canvas 粒子），随机角度、初速、颜色做抛物线下落并旋转， 1～2s 动画结束后立即从 DOM 移除， 防止节点泄漏。 一次性触发，不循环； 尊重 prefers-reduced-motion 改为静态成功图标。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目里程碑时刻添加撒花庆祝动效。 先检查产品调性与触发时机清单，确认撒花是合适的（低频正向）。 要求： - 30～60 枚纸屑，1～2s 抛物线飘落后清理 DOM - 一次性触发，颜色用品牌令牌 - 不遮挡结果信息，pointer-events 不拦截点击 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素到位后不是稳稳停住，而是带一两次越过后回弹的振荡， 像有弹性地"Q 一下"。 给界面注入物理感和俏皮感， 常用于成功状态、奖励时刻或品牌化入场。
动效相似概念当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件应用于用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式搭配使用