Icon Morph (图标变形)
别称 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。
适用场景
菜单开关按钮
变体
- hamburger to X
- hamburger to arrow
- play to pause
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。相似的动效
Shape Morph (形状变形)
别称 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
一个矢量形状平滑地变成另一个形状。
适用场景
图标状态切换、首屏主视觉
在[应用位置]添加“形状变形”(Shape Morph)，也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状，比如五边形向内收缩成星形，各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点，使变形干净、不闪烁；每次状态变化时播放一次，不要循环。点击试试
Copy-to-Clipboard Feedback (复制成功反馈)
别称 Copied state, Copy icon to checkmark
复制图标变成对勾，标签短暂显示“已复制”。
适用场景
代码块、分享链接
在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。••••••ABCDEF
点击试试
Password Reveal Toggle (密码显隐切换)
别称 Show/hide password, Eye icon toggle
显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。
适用场景
登录和注册表单
在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。SVG & Shape 中的其他动效
Line Drawing (线条绘制)
别称 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。
适用场景
图标、Logo 和插画
在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。Motion Path (运动路径)
别称 Animate Along Path, Offset Path Animation
元素沿自定义曲线路径移动，并可随路径旋转朝向。
适用场景
航线上的飞机或圆点、装饰性移动元素
在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。A
Orbiting Circles (环绕轨道)
别称 Orbit Animation, Orbit, Orbiting icons
小圆点或图标沿圆形轨道绕中心旋转。
适用场景
集成关系图
在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。