Animated Beam (動態光束)
別稱 Connecting beam
一道發光脈衝沿著連接兩個元素的線條移動。
適用情境
整合關係圖或資料流程圖
別稱 Connecting beam
一道發光脈衝沿著連接兩個元素的線條移動。
整合關係圖或資料流程圖
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「動態光束」(Animated Beam)效果,也叫 connecting beam。
一道短促的發光脈衝沿著連接兩個元素的線條從一端等速移動到另一端,然後重新開始:流暢、平靜。
連接線本身要一直看得見;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓脈衝保持靜止。別稱 Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
細細的發光線條沿路徑移動,有時撞到表面會迸散開來。
適用情境
主視覺背景
在[套用位置]加入「背景光束」(Background Beams)效果,也叫 light beams 或 background lines。
背景中鋪著幾條淺色曲線路徑,短短的發光條一條接一條地沿路徑移動,節奏平穩、等速。
光束要錯開時間,絕不同步移動,並放在內容後方;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止光束。別稱 Shine border, Animated border, Glowing effect, Moving Border
一道明亮的高光沿著卡片邊框環繞移動。
適用情境
精選卡片、CTA
在[套用位置]加入「邊框光束」(Border Beam) 效果,也叫 shine border 或 moving border。
一道短而亮的高光沿著卡片邊框以均勻、從容的速度環繞移動,循環時不能出現明顯跳動。
效果不能改變卡片的內容和尺寸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止光束。別稱 World Map Animated Lines, Globe Arcs
線條和圓點在地圖或地球上的各個地點之間動態移動。
適用情境
展示全球布局的視覺
在[套用位置]加入「動態地圖弧線」(Animated Map Arcs),也叫 globe arcs。
曲線在點狀地圖的各地點之間依序畫出,接著往目的地收回,同時目的地有一圈柔和的光環脈動:平靜而穩定。
讓各條弧線錯開時間,絕不同步移動;循環要無縫;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就暫停播放。別稱 Animate Along Path, Offset Path Animation
元素沿著自訂曲線路徑移動,並可隨路徑旋轉方向。
適用情境
路線上的飛機或圓點、裝飾性移動元素
在[套用位置]加入「路徑動畫」(Motion Path),也叫 animate along path。
一個小元素沿著自訂曲線路線緩慢、等速地移動,並隨時轉向前進的方向。
使用封閉路線,讓循環重複時不會跳動;路線要隨容器縮放,而不是固定尺寸。別稱 Gradient animation, Moving gradient, Background gradient animation
漸層背景中的顏色緩慢變化、平移或旋轉。
適用情境
主視覺背景、按鈕
在[套用位置]加入「動態漸層」(Animated Gradient)背景,也叫 gradient animation 或 moving gradient。
漸層的顏色在區域內緩慢平移,柔和、連續地流動,循環重新開始時不能出現明顯的跳動。
上方的文字在每種顏色上都要清楚易讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止移動。別稱 Flickering grid, Grid background
由線條或方塊組成的網格,其中的格子淡入淡出或閃爍。
適用情境
科技與 SaaS 主視覺
在[套用位置]加入「動態網格圖樣」(Animated Grid Pattern)背景,也叫 flickering grid 或 grid background。
淺色的網格線保持不動,零星幾個格子在不同時間緩慢淡入淡出:安靜、含蓄,絕不同時亮起。
讓它待在內容後方,不攔截點擊;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止閃爍。別稱 Northern lights gradient
柔和模糊的色帶像極光一樣在內容後方飄動。
適用情境
主視覺區塊
在[套用位置]加入「極光背景」(Aurora Background),也叫 northern lights gradient。
柔和、模糊的色帶在內容後方緩慢飄動搖曳,彼此重疊交融,就像北極光:非常緩慢、如夢似幻。
上方文字要保持清楚易讀,不要每一格畫面都重新對色帶做模糊,以維持流暢;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止飄動。