提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果,也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時,一條垂直邊緣緊緊跟隨,在一側露出隱藏的文字:流暢、直接,沒有延遲。
在沒有游標可跟隨的觸控裝置上,讓拖曳或輕觸也能顯示隱藏文字,並讓隱藏文字可被螢幕閱讀器讀取。相似的動效
A
將滑鼠移到上面
SVG Mask Reveal (SVG 遮罩顯現)
別稱 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
遮罩形狀劃過或跟隨游標,露出下方的內容。
適用情境
圖片和內容顯現
在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果,也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時,圓形遮罩從中心擴大,露出下方的內容;游標移開後再收合:流暢且偏快。
兩個圖層保持完全相同的尺寸,避免任何位移;鍵盤聚焦和點按時也顯示同樣的顯現效果。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移動指標試試
Cursor Spotlight (游標聚光燈)
別稱 Flashlight cursor, Spotlight effect
游標周圍的一圈光照亮內容,其餘部分維持暗色。
適用情境
主視覺區塊、揭示效果
在[套用位置]加入「游標聚光燈」(Cursor Spotlight) 效果,也叫手電筒游標 (flashlight cursor) 或聚光燈效果 (spotlight effect)。
一圈柔和的光跟隨游標,照亮下方的內容,區域內其餘部分維持變暗。
在觸控裝置上沒有可跟隨的游標,改為直接完整照亮顯示內容。A
B
拖曳試試
Before-After Slider (前後對比滑桿)
別稱 Image comparison slider, Compare slider
拖曳分隔線,一側顯示一張圖片,另一側顯示另一張。
適用情境
照片修圖、產品比較
在[套用位置]加入「前後對比滑桿」(Before-After Slider),也叫 image comparison slider 或 compare slider。
兩張圖片上下疊放,拖曳一條垂直分隔線時,一張露出更多、另一張露出更少;分隔線緊跟游標,沒有延遲。
分隔線一開始位於中間,並支援觸控和方向鍵操作。ABCDABCD
將滑鼠移到上面
Text Hover Effect (文字懸停效果)
別稱 Gradient Outline Text Hover, Text Fill on Hover
描邊文字被跟隨指標或橫掃而過的漸層填滿或點亮。
適用情境
大型展示文字、頁尾
在[套用位置]加入「文字懸停效果」(Text Hover Effect),也叫懸停文字填色 (text fill on hover) 或漸層描邊文字懸停 (gradient outline text hover)。
文字一開始只有描邊;游標停在上面時,實色填滿從左到右平順地掃入,游標移開後再退回去。
填色前的描邊文字也要清楚易讀,並且在鍵盤焦點時呈現同樣的效果。Text 中的其他動效
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
將滑鼠移到上面
Text Scramble (亂碼解碼文字)
別稱 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
文字被不斷刷新的隨機字元取代,並逐漸還原成最終的詞。
適用情境
科技風主視覺標題、連結懸停
在[套用位置]加入「亂碼解碼文字」(Text Scramble) 懸停效果,也叫文字解碼 (text decode) 或加密文字 (encrypted text)。
游標移到文字上時,每個字母快速閃過隨機字元,再從左到右依序定格為真正的字母。
亂碼過程中文字寬度不要跳動,讓螢幕閱讀器始終讀取真實文字,並且在鍵盤焦點時呈現同樣的效果。ABCDEF
移動指標試試
Text Tilt (文字傾斜)
別稱 Perspective Text Tilt
文字跟隨滑鼠位置以 3D 透視方式傾斜轉動。
適用情境
主視覺標題
在[套用位置]加入「文字傾斜」(Text Tilt) 效果,也叫透視文字傾斜 (perspective text tilt)。
文字隨著游標移動平順跟隨,以 3D 方式輕輕朝游標傾斜,游標移開後再緩緩恢復平整。
傾斜幅度要含蓄,確保文字易讀;在觸控裝置上,以及如果使用者開啟了「減少動態效果」(prefers-reduced-motion),文字保持平整不動。ABC DEFG
Typewriter (打字機效果)
別稱 Typing Animation, Typewriter Effect, Typing Text
字元像打字一樣逐一出現,通常後面跟著一個閃爍的游標。
適用情境
主視覺大標題、標語
在[套用位置]加入「打字機效果」(Typewriter),也叫打字動畫 (typing animation) 或打字文字 (typing text)。
字元以穩定的打字節奏逐一出現,最後一個已輸入字元後面緊跟一個游標,打完後閃爍幾次。
只播放一次、不要循環,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示完整文字。