Spotlight (聚光灯)
别称 Spotlight sweep, Light cone
一道柔和的锥形光或光斑扫入到位，照亮背景的一部分。
适用场景
首屏标题
变体
- sweep in
- pulsing
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“聚光灯”(Spotlight)效果，也叫 spotlight sweep 或 light cone。
页面加载时，一道柔和的锥形光从角落斜着扫进来，停在标题上方，到位时逐渐变亮：缓慢而流畅。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已照在标题上的光。相似的动效
Lamp Effect (灯光效果)
别称 Lamp glow
一条发光的灯线向两侧展开，向下方的标题投下一道锥形光。
适用场景
深色首屏标题
在[应用位置]添加“灯光效果”(Lamp Effect)，也叫 lamp glow。
区块进入视口时，一条细细的发光线从中间向两侧展开，向下方的标题投下一道柔和的锥形光，标题同时上浮淡入到位：缓慢而流畅。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示被照亮的标题。Light Rays (体积光)
别称 God rays, Light shafts
柔和的光束在背景上轻轻摇曳。
适用场景
营造氛围的页头
在[应用位置]添加“体积光”(Light Rays)背景，也叫 god rays 或 light shafts。
几道柔和的半透明光束从顶部呈扇形散开，左右轻轻摇曳，同时略微变亮变暗：缓慢而富有氛围。
光束要放在内容后面，并且足够淡，不影响阅读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移动指针试试
Cursor Spotlight (光标聚光灯)
别称 Flashlight cursor, Spotlight effect
指针周围的一圈光照亮内容，其余部分保持暗色。
适用场景
首屏大图区、揭示效果
在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。A
移动指针试试
Card Spotlight (卡片聚光灯)
别称 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的径向光跟随指针在卡片表面移动，照亮下方的背景。
适用场景
功能卡片、便当网格
在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果，也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动，指针移入时淡入，移出时淡出。
光晕放在卡片内容的后面，保证文字清晰可读；在触屏设备上则不显示光晕。Background & Ambient 中的其他动效
Starfield (星空)
别称 Stars background, Twinkling stars
细小的星星在如太空般的深色背景上闪烁或漂移。
适用场景
太空或夜晚主题的首屏
在[应用位置]添加“星空”(Starfield)背景，也叫 stars background 或 twinkling stars。
大小不一的小星星各按自己的节奏柔和地闪烁，整片星空非常缓慢地漂移：安静而平和。
星星数量要适中，保持轻快；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁和漂移。Vortex (漩涡)
别称 Swirling particles
粒子像漩涡一样绕着中心螺旋旋转。
适用场景
有冲击力的首屏背景
在[应用位置]添加“漩涡”(Vortex)背景，也叫 swirling particles。
小粒子像漩涡一样绕着中心点螺旋向内旋转，在边缘淡入，接近中心时淡出，形成流畅、连续的旋涡。
粒子数量要适中；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。Wave Background (波浪背景)
别称 Wavy background, Animated waves
多层波浪线条或形状沿水平方向起伏流动。
适用场景
区块分隔、首屏底部
在[应用位置]添加“波浪背景”(Wave Background)，也叫 wavy background 或 animated waves。
几层波浪形状以略有不同的速度横向滚动，彼此交叠、像水一样流动：缓慢而平滑。
让每层波浪无缝循环、看不到跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让波浪静止。