提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「微光文字」(Shimmer Text) 效果,也叫 animated shiny text 或金屬微光文字 (metallic shimmer text)。
一條光帶從左到右流暢地掃過文字,短暫停頓後再重複。
高光經過時文字仍要清楚可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。相似的動效
A
將滑鼠移到上面
Shine Sweep (光澤掃過)
別稱 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
懸停時,一道斜向光帶從元素的一側掃到另一側。
適用情境
按鈕、卡片、徽章
在[套用位置]加入「光澤掃過」(Shine Sweep) 懸停效果,也叫光澤 (sheen)、閃亮按鈕 (shiny button)、懸停掃光 (shine on hover)、閃光 (glint)、微光 (shimmer) 或微光按鈕 (shimmer button)。
游標停在元素上時,一道柔和的斜向光帶從左往右掃過元素,並在短暫停頓後重複。
光帶要裁切在元素內部,游標移開後停止;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不要播放。ABCDEF
Animated Gradient Text (動態漸層文字)
別稱 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
文字以漸層填色,顏色持續變換或流動。
適用情境
品牌標題
在[套用位置]加入「動態漸層文字」(Animated Gradient Text) 效果,也叫極光文字 (aurora text) 或 rainbow text sweep。
文字以漸層填色,顏色在文字上緩慢、流暢地流動,無縫地無限循環。
任何時刻文字都要在背景上清楚易讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓顏色保持靜止。Skeleton Shimmer (骨架微光)
別稱 Skeleton wave, Shimmer effect, placeholder-wave
一道亮光掃過灰色佔位圖形。
適用情境
內容載入佔位
在[套用位置]加入「骨架微光」(Skeleton Shimmer),也叫 skeleton wave 或 shimmer effect。
一道柔和的光帶由左往右掃過灰色佔位圖形,下一次掃過前稍微停頓:流暢、不疾不徐。
佔位圖形要與實際版面一致,內容載入時不能跳動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就顯示靜態佔位。ABCDEF
將滑鼠移到上面
Holographic Text (全像文字)
別稱 Holographic Foil Text
文字呈現流轉的彩虹箔片反光,隨游標或時間移動。
適用情境
質感卡片
在[套用位置]加入「全像文字」(Holographic Text) 滑鼠懸停效果,也叫全像箔片文字 (holographic foil text)。
游標停在文字上時,一道箔片般的彩色光帶在字母上緩慢、流暢地來回滑動;游標移開後,文字恢復原本的樸素樣子。
光澤流動的任何時刻文字都要清楚易讀;鍵盤聚焦時也顯示同樣的效果。Text 中的其他動效
ABCABCABC
在裡面捲動
Sliced Text (切片文字)
別稱 On-Scroll Sliced Text
標題被切成若干水平切片,頁面捲動時切片彼此錯開、橫向移動。
適用情境
編輯風格的首屏
在[套用位置]加入「切片文字」(Sliced Text) 效果,也叫 on-scroll sliced text。
把一個大標題切成若干水平切片,一開始對齊成完整的詞,使用者捲動時切片彼此錯開、橫向滑動。
讓錯位直接跟隨捲動位置,往回捲動時隨之還原;對螢幕閱讀器保持標題為一段完整可讀的文字。ABCDEFGHIJKLMNOP
Spinning Text (環形旋轉文字)
別稱 Circular Text, Text on Circle
文字沿圓周排列,並持續旋轉。
適用情境
旋轉徽章、印章
在[套用位置]加入「環形旋轉文字」(Spinning Text),也叫環形文字 (circular text) 或 text on circle。
字母沿圓周平均排列,整個圓緩慢、等速地旋轉,循環重新開始時不能有跳動。
只向螢幕閱讀器提供一次一般文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止旋轉。ABCDEF
Split Text Stagger (文字拆分交錯)
別稱 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
標題被拆分成字元、單字或行,以短暫延遲依序動畫進場。
適用情境
大標題、章節標題
在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果,也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母,字母之間留出短暫延遲,依序上移並淡入,快速流暢,不要有彈跳感。
標題進入畫面時只播放一次,讓螢幕閱讀器把它當作一個完整的詞讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。