Copy-to-Clipboard Feedback (复制成功反馈)
别称 Copied state, Copy icon to checkmark
复制图标变成对勾，标签短暂显示“已复制”。
适用场景
代码块、分享链接
变体
- icon morph
- tooltip Copied
- label swap
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。相似的动效
点击试试
Icon Morph (图标变形)
别称 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。
适用场景
菜单开关按钮
在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。Success Checkmark (成功对勾)
别称 Animated success tick
圆圈和对勾自行画出，确认操作已成功。
适用场景
表单提交、支付完成
在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。Button Loading State (按钮加载状态)
别称 Spinner button, Loading button, Button spinner, Submit loading state
操作执行期间，按钮把文字换成一个小加载图标，或在旁边加上它。
适用场景
表单提交、异步操作
在[应用位置]添加“按钮加载状态”(Button Loading State)，也叫 spinner button 或 loading button。
按下时按钮轻轻下压，文字淡出，操作进行期间在原位置显示一个小加载图标，完成后文字再回来。
加载时保持按钮宽度不变，阻止重复点击，并向屏幕阅读器播报忙碌状态。••••••ABCDEF
点击试试
Password Reveal Toggle (密码显隐切换)
别称 Show/hide password, Eye icon toggle
显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。
适用场景
登录和注册表单
在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。Micro-interaction 中的其他动效
A
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。ABC
Floating Label (浮动标签)
别称 Float label, Animated placeholder
输入框获得焦点或已有内容时，占位标签上移并缩小到输入框上方。
适用场景
表单、登录输入框
在[应用位置]添加“浮动标签”(Floating Label)，也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时，原本在框内的标签平滑而快速地上移并缩小，停到输入框的上边缘；只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label，并确保输入框高度不变，让表单永远不会跳动。点击试试
Like / Heart Burst (点赞爱心)
别称 Heart animation, Twitter heart, Favorite toggle
点击时爱心图标填充颜色，并迸发出小粒子或跳动一下。
适用场景
点赞和收藏按钮
在[应用位置]添加“点赞爱心”(Like / Heart Burst)动画，也叫爱心动画(heart animation)或收藏切换(favorite toggle)。
点赞时爱心填充颜色并带弹性地弹一下，同时一圈光环和小圆点向外迸发并淡出，整体快速、俏皮；取消点赞时爱心只是安静地变空。
做成带按下状态的真正切换按钮，只在开启时播放迸发效果。