提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「亂碼解碼文字」(Text Scramble) 懸停效果,也叫文字解碼 (text decode) 或加密文字 (encrypted text)。
游標移到文字上時,每個字母快速閃過隨機字元,再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動,讓螢幕閱讀器始終讀取真實文字,並且在鍵盤焦點時呈現同樣的效果。相似的動效
ABC DEFG
Typewriter (打字機效果)
別稱 Typing Animation, Typewriter Effect, Typing Text
字元像打字一樣逐一出現,通常後面跟著一個閃爍的游標。
適用情境
主視覺大標題、標語
在[套用位置]加入「打字機效果」(Typewriter),也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現,最後一個已輸入字元後面緊跟一個游標,打完後閃爍幾次。
只播放一次、不要循環,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示完整文字。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
別稱 Text Generate Effect
頁面載入時,文字逐一淡入,常伴隨模糊逐漸消散,彷彿正在生成。
適用情境
AI 風格的開場文案
在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入,同時每個詞上的柔和模糊逐漸消散,彷彿文字正在生成:節奏平穩、沉靜。
頁面載入時只播放一次,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (翻牌文字)
別稱 Text Flipping Board, Flip Board, Vestaboard display
字元像機場航班看板一樣翻動,直到停在目標字母上。
適用情境
狀態看板、復古顯示幕
在[套用位置]加入「翻牌文字」(Split-Flap Text) 效果,也叫翻牌看板 (text flipping board 或 flip board)。
每個字元格快速翻過字母表,直到停在目標字母上,各字元格從左到右依序停穩。
每次文字出現或變化時執行一次,只向螢幕閱讀器朗讀最終文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不翻動、直接顯示最終文字。ABCDEF
將滑鼠移到上面
Glitch Text (故障文字)
別稱 Text Glitch, RGB Split Glitch
文字像訊號故障一樣抖動,出現切片錯位和紅青色分離。
適用情境
賽博龐克或遊戲風格標題
在[套用位置]加入「故障文字」(Glitch Text) 滑鼠懸停效果,也叫 text glitch 或 RGB 分離故障 (RGB split glitch)。
游標停在文字上時,文字以快速、俐落的陣發方式抖動:細細的橫向切片左右跳動,兩份彩色副本像訊號故障一樣錯開;游標移開後恢復原狀。
真正的文字在文件中只保留一份,避免螢幕報讀器讀出副本;鍵盤聚焦時也顯示同樣的效果。Text 中的其他動效
ABCDEF
移動指標試試
Text Tilt (文字傾斜)
別稱 Perspective Text Tilt
文字跟隨滑鼠位置以 3D 透視方式傾斜轉動。
適用情境
主視覺標題
在[套用位置]加入「文字傾斜」(Text Tilt) 效果,也叫透視文字傾斜 (perspective text tilt)。
文字隨著游標移動平順跟隨,以 3D 方式輕輕朝游標傾斜,游標移開後再緩緩恢復平整。
傾斜幅度要含蓄,確保文字易讀;在觸控裝置上,以及如果使用者開啟了「減少動態效果」(prefers-reduced-motion),文字保持平整不動。ABC DEF
將滑鼠移到上面
Underline Draw (底線繪製)
別稱 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
懸停時,連結下方的底線從一側或中間延伸出來。
適用情境
導覽連結、文內連結
在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果,也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時,文字下方的底線從左到右平順延伸,游標移開後再收回:快速而含蓄。
不要讓底線推擠周圍版面,並且在鍵盤焦點時呈現同樣的效果。