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)，就讓波浪靜止。