提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「液體填充文字」(Liquid Fill Text) 效果,也叫 water fill text。
外框字母中注滿液體,波浪狀的液面橫向翻滾,液位緩慢地起伏,形成柔和、連續的循環。
單字要保留為真正的文字供螢幕報讀器讀取;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓液體停在一個靜止的液位。相似的動效
Video Text (影片文字)
別稱 Text Video Mask
大型字母如同窗口,裡面顯示正在播放的影片。
適用情境
主視覺標題
在[套用位置]加入「影片文字」(Video Text) 效果,也叫文字影片遮罩 (text video mask)。
讓粗大的字母成為觀看正在播放影片的窗口,動態畫面只在字母形狀內顯示。
影片保持靜音、循環播放且不顯示控制項,為螢幕閱讀器提供真實的文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就顯示一張靜止畫面。ABCDABCD
將滑鼠移到上面
Text Hover Effect (文字懸停效果)
別稱 Gradient Outline Text Hover, Text Fill on Hover
描邊文字被跟隨指標或橫掃而過的漸層填滿或點亮。
適用情境
大型展示文字、頁尾
在[套用位置]加入「文字懸停效果」(Text Hover Effect),也叫懸停文字填色 (text fill on hover) 或漸層描邊文字懸停 (gradient outline text hover)。
文字一開始只有描邊;游標停在上面時,實色填滿從左到右平順地掃入,游標移開後再退回去。
填色前的描邊文字也要清楚易讀,並且在鍵盤焦點時呈現同樣的效果。Stroke Text Draw (文字描邊繪製)
別稱 Draw In Text, Animated Stroke Text
先以描邊畫出字母輪廓,再顯示填色。
適用情境
Logo、首屏大字
在[套用位置]加入「文字描邊繪製」(Stroke Text Draw) 效果,也叫 draw in text 或 animated stroke text。
字母輪廓流暢地逐筆畫出,輪廓完成後填色再淡入。
頁面載入時只播放一次,讓文字保持為可存取的真實文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示已填色的文字。Text 中的其他動效
ABCD EFGHI JKLM
Mask Reveal (遮罩文字顯現)
別稱 Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
文字從一條裁切線後方向上滑出,彷彿憑空出現。
適用情境
編輯風格的大標題
在[套用位置]加入「遮罩文字顯現」(Mask Reveal) 文字進場效果,也叫行遮罩顯現 (line mask reveal) 或文字遮罩 (text masking)。
每一行文字從一條看不見的邊緣後方向上滑出,彷彿憑空出現,一行接一行,快速流暢,不要有彈跳感。
文字捲動進入畫面時只播放一次;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示文字、不做動畫。Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (駭客任務字雨)
別稱 Digital Rain Text
綠色字元像《駭客任務》裡的程式碼雨一樣成列落下。
適用情境
駭客主題
在[套用位置]加入「駭客任務字雨」(Matrix Text) 效果,也叫 digital rain text。
一列列字元以略有差異的速度穩定落下,每列最前面的字元明亮,後面拖著逐漸淡去的尾跡。
把它當作對螢幕閱讀器隱藏的裝飾,保持輕量;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止動畫。ABCDEF
字母向下滴落、拉長,彷彿正在融化。
適用情境
恐怖或趣味標題
在[套用位置]加入「融化文字」(Melting Text) 效果。
字母緩慢向下塌陷,下方拉出滴落的液滴,彷彿正在融化,最後停在靜止的融化樣貌。
文字進入畫面時只播放一次,結束時保持文字可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不做動畫。