Motion Path (运动路径)
别称 Animate Along Path, Offset Path Animation
元素沿自定义曲线路径移动，并可随路径旋转朝向。
适用场景
航线上的飞机或圆点、装饰性移动元素
变体
- CSS offset-path
- GSAP MotionPath
- auto-rotate
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。相似的动效
A
Orbiting Circles (环绕轨道)
别称 Orbit Animation, Orbit, Orbiting icons
小圆点或图标沿圆形轨道绕中心旋转。
适用场景
集成关系图
在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。A
1
点击试试
Add to Cart Fly (加购抛物线)
别称 Fly to cart, Add-to-cart animation
商品图片一边缩小一边沿弧线飞入购物车图标。
适用场景
电商
在[应用位置]添加“加购抛物线”(Add to Cart Fly)动画，也叫飞入购物车(fly to cart)或加购动画(add-to-cart animation)。
点击加购按钮时，商品图片的一个小副本一边缩小，一边沿一条流畅而快速的弧线飞入购物车图标，购物车在数量更新时轻轻弹一下。
每次点击只播放一次，不要移动原来的商品卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就省略飞行动画，但照常更新购物车。A
B
Animated Beam (动态光束)
别称 Connecting beam
一道发光脉冲沿着连接两个元素的线条移动。
适用场景
集成关系图或数据流图
在[应用位置]添加“动态光束”(Animated Beam)效果，也叫 connecting beam。
一道短促的发光脉冲沿着连接两个元素的线条从一端匀速移动到另一端，然后重新开始：流畅、平静。
连接线本身要始终可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则让脉冲保持静止。在里面滚动
Text Path Scroll (路径文字滚动)
别称 Text Path Curve Scroll Animation
文字沿曲线路径排列，并随用户滚动沿路径移动。
适用场景
叙事型版块
在[应用位置]添加“路径文字滚动”(Text Path Scroll)效果，也叫 text path curve scroll animation。
文字排在一条曲线上，随用户滚动沿曲线滑动：向下滚动时前进，向上滚动时后退。
让移动直接绑定滚动位置、没有延迟，并让屏幕阅读器把它当作普通文本读取。SVG & Shape 中的其他动效
Shape Morph (形状变形)
别称 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
一个矢量形状平滑地变成另一个形状。
适用场景
图标状态切换、首屏主视觉
在[应用位置]添加“形状变形”(Shape Morph)，也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状，比如五边形向内收缩成星形，各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点，使变形干净、不闪烁；每次状态变化时播放一次，不要循环。ABC
ABC
将鼠标悬停在上面
SVG Displacement Distortion (SVG置换扭曲)
别称 feTurbulence Distortion, Displacement Map Effect
SVG 滤镜用动态噪声让文字或形状发生扭曲。
适用场景
液体或波纹悬停效果
在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果，也叫置换贴图效果(displacement map effect)。
指针悬停时，文字或形状像隔着流动的水一样荡漾晃动，效果柔和地渐入；指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜，静止时不产生任何开销；键盘聚焦时也显示同样的效果。