Confetti (撒花)
别称 Confetti burst, Celebration
彩色纸片喷涌而出再飘落下来，用来庆祝成功。
适用场景
购买完成、达成目标
变体
- canvas-confetti
- Confetti on click button
- fireworks
- burst
- side cannons
- rain
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。相似的动效
点击试试
Like / Heart Burst (点赞爱心)
别称 Heart animation, Twitter heart, Favorite toggle
点击时爱心图标填充颜色，并迸发出小粒子或跳动一下。
适用场景
点赞和收藏按钮
在[应用位置]添加“点赞爱心”(Like / Heart Burst)动画，也叫爱心动画(heart animation)或收藏切换(favorite toggle)。
点赞时爱心填充颜色并带弹性地弹一下，同时一圈光环和小圆点向外迸发并淡出，整体快速、俏皮；取消点赞时爱心只是安静地变空。
做成带按下状态的真正切换按钮，只在开启时播放迸发效果。Particles (粒子)
别称 Floating particles, Particle field
大量小圆点在背景中漂浮、相互连接或对指针作出反应。
适用场景
首屏和区块背景
在[应用位置]添加“粒子”(Particles)背景，也叫 floating particles 或 particle field。
大小不一的小圆点各按自己的节奏，沿着柔和、随意游走的路径缓慢漂浮：平静而轻盈。
圆点数量要适中，在性能较弱的设备上也保持轻快；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。ABC
Sparkles (闪耀粒子)
别称 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
细小明亮的光点在文字或区块周围闪现又消失。
适用场景
大标题、高级感点缀
在[应用位置]添加“闪耀粒子”(Sparkles)效果，也叫 glitter 或 twinkle particles。
小小的星形光点在文字周围分散的位置、随机的时刻冒出来，闪烁后淡出：轻盈而迅速。
光点只作装饰，要对屏幕阅读器隐藏，绝不能遮住文字本身；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。ABCDEF
将鼠标悬停在上面
Letter Scatter (文字飞散)
别称 Explosive Letter Burst, Scatter Gather Letters
悬停时字母四散飞开再归位，或在入场时向外迸散。
适用场景
俏皮的链接
在[应用位置]添加“文字飞散”(Letter Scatter)悬停效果，也叫 scatter gather letters 或 explosive letter burst。
指针移到文字上时，每个字母带着一点旋转朝各自方向飞出一小段；指针移开后再顺滑地聚拢回原来的单词。
字母移动时，单词在布局中占的位置保持不变，屏幕阅读器要把它当作一个词来读；键盘聚焦时也显示同样的效果。Micro-interaction 中的其他动效
点击试试
Copy-to-Clipboard Feedback (复制成功反馈)
别称 Copied state, Copy icon to checkmark
复制图标变成对勾，标签短暂显示“已复制”。
适用场景
代码块、分享链接
在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。A
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。ABC
Floating Label (浮动标签)
别称 Float label, Animated placeholder
输入框获得焦点或已有内容时，占位标签上移并缩小到输入框上方。
适用场景
表单、登录输入框
在[应用位置]添加“浮动标签”(Floating Label)，也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时，原本在框内的标签平滑而快速地上移并缩小，停到输入框的上边缘；只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label，并确保输入框高度不变，让表单永远不会跳动。