Orbiting Circles (环绕轨道)
别称 Orbit Animation, Orbit, Orbiting icons
小圆点或图标沿圆形轨道绕中心旋转。
适用场景
集成关系图
变体
- single ring
- multiple rings
- reverse direction
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。相似的动效
Motion Path (运动路径)
别称 Animate Along Path, Offset Path Animation
元素沿自定义曲线路径移动，并可随路径旋转朝向。
适用场景
航线上的飞机或圆点、装饰性移动元素
在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。ABCDEFGHIJKLMNOP
Spinning Text (环形旋转文字)
别称 Circular Text, Text on Circle
文字沿圆周排列，并持续旋转。
适用场景
旋转徽章、印章
在[应用位置]添加“环形旋转文字”(Spinning Text)，也叫环形文字(circular text)或 text on circle。
字母沿圆周均匀排列，整个圆缓慢、匀速地旋转，循环重新开始时不能有跳动。
只向屏幕阅读器提供一次普通文字；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。Vortex (漩涡)
别称 Swirling particles
粒子像漩涡一样绕着中心螺旋旋转。
适用场景
有冲击力的首屏背景
在[应用位置]添加“漩涡”(Vortex)背景，也叫 swirling particles。
小粒子像漩涡一样绕着中心点螺旋向内旋转，在边缘淡入，接近中心时淡出，形成流畅、连续的旋涡。
粒子数量要适中；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。3D Globe (3D地球)
别称 Interactive globe
带有标记点或弧线的 3D 地球在页面中旋转。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“3D地球”(3D Globe)，也叫交互式地球(interactive globe)。
表面带几个标记点的地球绕轴缓慢匀速转动，标记点随之一起转：平静而连续。
把它作为装饰，为其展示的信息提供文字替代；移出屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。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)。
指针悬停时，文字或形状像隔着流动的水一样荡漾晃动，效果柔和地渐入；指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜，静止时不产生任何开销；键盘聚焦时也显示同样的效果。A
将鼠标悬停在上面
SVG Mask Reveal (SVG遮罩显现)
别称 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形状划过或跟随指针，露出下方的内容。
适用场景
图片和内容显现
在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。