Background & Ambient

一道发光脉冲沿着连接两个元素的线条移动。

在[应用位置]添加“动态光束”(Animated Beam)效果，也叫 connecting beam。
一道短促的发光脉冲沿着连接两个元素的线条从一端匀速移动到另一端，然后重新开始：流畅、平静。
连接线本身要始终可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则让脉冲保持静止。

渐变背景中的颜色缓慢变化、平移或旋转。

在[应用位置]添加“动态渐变”(Animated Gradient)背景，也叫 gradient animation 或 moving gradient。
渐变的颜色在区域内缓慢平移，柔和、连续地流动，循环重新开始时不能出现可见的跳动。
上方的文字在每种颜色上都要清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止移动。

由线条或方块组成的网格，其中的格子淡入淡出或闪烁。

在[应用位置]添加“动态网格”(Animated Grid Pattern)背景，也叫 flickering grid 或 grid background。
浅色的网格线保持不动，零星几个格子在不同时间缓慢淡入淡出：安静、含蓄，绝不同时亮起。
让它待在内容后面，不拦截点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。

柔和模糊的色带像极光一样在内容后方飘动。

在[应用位置]添加“极光背景”(Aurora Background)，也叫 northern lights gradient。
柔和、模糊的色带在内容后方缓慢飘动摇曳，彼此重叠交融，就像北极光：非常缓慢、如梦似幻。
上方文字要保持清晰可读，不要每一帧都重新对色带做模糊，以保持流畅；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止飘动。

细细的发光线条沿路径移动，有时撞到表面会迸散开来。

在[应用位置]添加“背景光束”(Background Beams)效果，也叫 light beams 或 background lines。
背景中铺着几条浅色曲线路径，短短的发光条一条接一条地沿路径移动，节奏平稳、匀速。
光束要错开时间，绝不同步移动，并放在内容后面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

倾斜的方块网格在指针经过时亮起颜色。

在[应用位置]添加“背景方块”(Background Boxes)效果，也叫 tile hover background。
用倾斜的方块网格铺满区域；指针经过的方块要立即亮起，再慢慢暗回去，留下一条短短的拖尾。
方块要放在内容后面，不能挡住对内容的点击；在触屏设备上改为点亮被点按的方块。

一道明亮的高光沿着卡片边框环绕移动。

在[应用位置]添加“边框光束”(Border Beam)效果，也叫 shine border 或 moving border。
一道短而亮的高光沿卡片边框以均匀、从容的速度环绕移动，循环时不能出现明显跳动。
效果不能改变卡片的内容和尺寸；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

点阵以波浪的方式脉动或发光。

在[应用位置]添加“点阵发光”(Dot Pattern Glow)背景，也叫 dotted glow background 或 dot grid。
细密的点阵保持静止，一道柔和的光带缓缓扫过，点亮经过的圆点：平静而含蓄。
圆点要足够淡，保证上层内容清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止发光。

一条发光的灯线向两侧展开，向下方的标题投下一道锥形光。

在[应用位置]添加“灯光效果”(Lamp Effect)，也叫 lamp glow。
区块进入视口时，一条细细的发光线从中间向两侧展开，向下方的标题投下一道柔和的锥形光，标题同时上浮淡入到位：缓慢而流畅。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示被照亮的标题。

柔和的光束在背景上轻轻摇曳。

在[应用位置]添加“体积光”(Light Rays)背景，也叫 god rays 或 light shafts。
几道柔和的半透明光束从顶部呈扇形散开，左右轻轻摇曳，同时略微变亮变暗：缓慢而富有氛围。
光束要放在内容后面，并且足够淡，不影响阅读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止光束。

多个颜色点平滑地交融、漂移，形成有机的多色背景。

在[应用位置]添加“网格渐变”(Mesh Gradient)背景，也叫 animated mesh gradient。
几团柔和的色块彼此交融，在区域内缓慢漂移，让背景以有机的方式不断变化：非常缓慢、流畅。
无论颜色如何交融，都要保证上层内容清晰可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止漂移。

带着发光尾迹的斜线划过卡片或区块。

在[应用位置]添加“流星”(Meteors)效果，也叫流星雨(meteor shower)或 shooting stars。
几道带着渐隐尾迹的小斜线在随机时刻斜着划过区域，每一道都一闪而过。
数量要少，保持点缀的作用，并在区域边缘裁切；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止流星。

细密的颗粒纹理覆盖在页面上，有时像胶片颗粒一样闪动。

在[应用位置]添加“噪点颗粒”(Noise / Grain Texture)叠加层，也叫胶片颗粒(film grain)或 noise background。
一层细密、浅淡的颗粒纹理覆盖在表面上，像胶片颗粒一样小幅跳动闪烁：要含蓄，绝不能强到让内容显得浑浊。
点击要能穿透叠加层；纹理只生成一次，不要每帧生成；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

大量小圆点在背景中漂浮、相互连接或对指针作出反应。

在[应用位置]添加“粒子”(Particles)背景，也叫 floating particles 或 particle field。
大小不一的小圆点各按自己的节奏，沿着柔和、随意游走的路径缓慢漂浮：平静而轻盈。
圆点数量要适中，在性能较弱的设备上也保持轻快；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止动画。

模糊强度朝边缘逐渐增加，让内容柔和地淡出。

在[应用位置]添加“渐进模糊”(Progressive Blur)边缘，也叫 gradient blur edge。
朝边缘滚动的内容要逐渐变得更模糊、更柔和，平滑过渡，而不是在一条生硬的线上被截断。
只在后面还有更多内容的边缘显示模糊，并且模糊区域不能挡住点击或滚动。

倾斜的透视网格像合成波地面一样朝观者滚动而来。

在[应用位置]添加“复古网格”(Retro Grid)背景，也叫透视网格(perspective grid)或 synthwave grid。
一片向远处倾斜的透视网格地面匀速朝观者滚动，并在地平线处淡出：流畅、无尽。
循环要无缝，线条不能跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止滚动。

同心圆从中心点向外扩散并逐渐淡出。

在[应用位置]添加“同心波纹”(Ripple Rings)效果，也叫 background ripple 或 concentric ripples。
圆环从中心点不断向外扩散，越大越淡，一个接一个、间距均匀：缓慢而稳定。
中心元素保持静止、位置不变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止波纹。

细小明亮的光点在文字或区块周围闪现又消失。

在[应用位置]添加“闪耀粒子”(Sparkles)效果，也叫 glitter 或 twinkle particles。
小小的星形光点在文字周围分散的位置、随机的时刻冒出来，闪烁后淡出：轻盈而迅速。
光点只作装饰，要对屏幕阅读器隐藏，绝不能遮住文字本身；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁。

一道柔和的锥形光或光斑扫入到位，照亮背景的一部分。

在[应用位置]添加“聚光灯”(Spotlight)效果，也叫 spotlight sweep 或 light cone。
页面加载时，一道柔和的锥形光从角落斜着扫进来，停在标题上方，到位时逐渐变亮：缓慢而流畅。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示已照在标题上的光。

细小的星星在如太空般的深色背景上闪烁或漂移。

在[应用位置]添加“星空”(Starfield)背景，也叫 stars background 或 twinkling stars。
大小不一的小星星各按自己的节奏柔和地闪烁，整片星空非常缓慢地漂移：安静而平和。
星星数量要适中，保持轻快；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止闪烁和漂移。

粒子像漩涡一样绕着中心螺旋旋转。

在[应用位置]添加“漩涡”(Vortex)背景，也叫 swirling particles。
小粒子像漩涡一样绕着中心点螺旋向内旋转，在边缘淡入，接近中心时淡出，形成流畅、连续的旋涡。
粒子数量要适中；离开屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。

多层波浪线条或形状沿水平方向起伏流动。

在[应用位置]添加“波浪背景”(Wave Background)，也叫 wavy background 或 animated waves。
几层波浪形状以略有不同的速度横向滚动，彼此交叠、像水一样流动：缓慢而平滑。
让每层波浪无缝循环、看不到跳动；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就让波浪静止。