提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「漩渦」(Vortex) 背景,也叫 swirling particles。
小粒子像漩渦一樣繞著中心點螺旋向內旋轉,在邊緣淡入,接近中心時淡出,形成流暢、連續的漩渦。
粒子數量要適中;離開畫面時暫停;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止旋轉。相似的動效
Particles (粒子)
別稱 Floating particles, Particle field
大量小圓點在背景中漂浮、彼此連線或對游標做出反應。
適用情境
主視覺和區塊背景
在[套用位置]加入「粒子」(Particles) 背景,也叫 floating particles 或 particle field。
大小不一的小圓點各按自己的節奏,沿著柔和、隨意遊走的路徑緩慢漂浮:平靜而輕盈。
圓點數量要適中,在效能較弱的裝置上也保持輕快;離開畫面時暫停;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。A
Orbiting Circles (軌道環繞)
別稱 Orbit Animation, Orbit, Orbiting icons
小圓點或圖示沿著圓形軌道繞中心旋轉。
適用情境
整合關係圖
在[套用位置]加入「軌道環繞」(Orbiting Circles),也叫 orbit animation 或 orbiting icons。
小圓點沿著圓形軌道緩慢、等速地繞中心元素旋轉,外圈則以更慢的速度反向旋轉。
循環要無縫,環繞的元素始終保持正立;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止旋轉。Background & Ambient 中的其他動效
Wave Background (波浪背景)
別稱 Wavy background, Animated waves
多層波浪線條或形狀沿水平方向起伏流動。
適用情境
區塊分隔、主視覺底部
在[套用位置]加入「波浪背景」(Wave Background),也叫 wavy background 或 animated waves。
幾層波浪形狀以略有不同的速度橫向流動,彼此交疊、像水一樣變化:緩慢而平順。
讓每層波浪無縫循環、看不到跳動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓波浪靜止。A
B
Animated Beam (動態光束)
別稱 Connecting beam
一道發光脈衝沿著連接兩個元素的線條移動。
適用情境
整合關係圖或資料流程圖
在[套用位置]加入「動態光束」(Animated Beam)效果,也叫 connecting beam。
一道短促的發光脈衝沿著連接兩個元素的線條從一端等速移動到另一端,然後重新開始:流暢、平靜。
連接線本身要一直看得見;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓脈衝保持靜止。Animated Gradient (動態漸層)
別稱 Gradient animation, Moving gradient, Background gradient animation
漸層背景中的顏色緩慢變化、平移或旋轉。
適用情境
主視覺背景、按鈕
在[套用位置]加入「動態漸層」(Animated Gradient)背景,也叫 gradient animation 或 moving gradient。
漸層的顏色在區域內緩慢平移,柔和、連續地流動,循環重新開始時不能出現明顯的跳動。
上方的文字在每種顏色上都要清楚易讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止移動。