提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“动态光束”(Animated Beam)效果,也叫 connecting beam。
一道短促的发光脉冲沿着连接两个元素的线条从一端匀速移动到另一端,然后重新开始:流畅、平静。
连接线本身要始终可见;如果用户开启了“减少动态效果”(prefers-reduced-motion),则让脉冲保持静止。相似的动效
Background Beams (背景光束)
别称 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
细细的发光线条沿路径移动,有时撞到表面会迸散开来。
适用场景
首屏背景
在[应用位置]添加“背景光束”(Background Beams)效果,也叫 light beams 或 background lines。
背景中铺着几条浅色曲线路径,短短的发光条一条接一条地沿路径移动,节奏平稳、匀速。
光束要错开时间,绝不同步移动,并放在内容后面;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止光束。A
Border Beam (边框光束)
别称 Shine border, Animated border, Glowing effect, Moving Border
一道明亮的高光沿着卡片边框环绕移动。
适用场景
重点卡片、CTA
在[应用位置]添加“边框光束”(Border Beam)效果,也叫 shine border 或 moving border。
一道短而亮的高光沿卡片边框以均匀、从容的速度环绕移动,循环时不能出现明显跳动。
效果不能改变卡片的内容和尺寸;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止光束。Animated Map Arcs (地图飞线)
别称 World Map Animated Lines, Globe Arcs
线条和圆点在地图或地球上的各个地点之间动态移动。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“地图飞线”(Animated Map Arcs),也叫 globe arcs。
曲线在点阵地图的各地点之间依次画出,随后向目的地收回,同时目的地处有一圈柔和的光环脉动:平静而稳定。
让各条弧线错开时间,绝不同步移动;循环要无缝;如果用户开启了“减少动态效果”(prefers-reduced-motion),则暂停播放。Motion Path (运动路径)
别称 Animate Along Path, Offset Path Animation
元素沿自定义曲线路径移动,并可随路径旋转朝向。
适用场景
航线上的飞机或圆点、装饰性移动元素
在[应用位置]添加“运动路径”(Motion Path)动画,也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动,并随时转向前进的方向。
使用闭合路线,让循环重复时没有跳变;路线要随容器缩放,而不是固定尺寸。Background & Ambient 中的其他动效
Animated Gradient (动态渐变)
别称 Gradient animation, Moving gradient, Background gradient animation
渐变背景中的颜色缓慢变化、平移或旋转。
适用场景
首屏背景、按钮
在[应用位置]添加“动态渐变”(Animated Gradient)背景,也叫 gradient animation 或 moving gradient。
渐变的颜色在区域内缓慢平移,柔和、连续地流动,循环重新开始时不能出现可见的跳动。
上方的文字在每种颜色上都要清晰可读;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止移动。Animated Grid Pattern (动态网格)
别称 Flickering grid, Grid background
由线条或方块组成的网格,其中的格子淡入淡出或闪烁。
适用场景
科技和 SaaS 首屏
在[应用位置]添加“动态网格”(Animated Grid Pattern)背景,也叫 flickering grid 或 grid background。
浅色的网格线保持不动,零星几个格子在不同时间缓慢淡入淡出:安静、含蓄,绝不同时亮起。
让它待在内容后面,不拦截点击;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止闪烁。Aurora Background (极光背景)
别称 Northern lights gradient
柔和模糊的色带像极光一样在内容后方飘动。
适用场景
首屏区块
在[应用位置]添加“极光背景”(Aurora Background),也叫 northern lights gradient。
柔和、模糊的色带在内容后方缓慢飘动摇曳,彼此重叠交融,就像北极光:非常缓慢、如梦似幻。
上方文字要保持清晰可读,不要每一帧都重新对色带做模糊,以保持流畅;如果用户开启了“减少动态效果”(prefers-reduced-motion),则停止飘动。