提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字輪替」(Word Rotate) 效果,也叫輪替詞 (rotating words) 或翻轉詞 (flip words)。
行內的一個詞向上滑出,清單中的下一個詞從下方滑入,每個詞停留片刻後再切換。
詞寬不同時不要讓這一行的其餘部分跳動,不要讓螢幕閱讀器朗讀每次切換;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止輪替。相似的動效
AWBXCYDZ
Text Replacement (文字替換)
別稱 Text Swap
原有文字以動畫方式退出,並被新的文字內容取代。
適用情境
會變化的標籤
在[套用位置]加入「文字替換」(Text Replacement) 效果,也叫文字切換 (text swap)。
文字變化時,舊字元向上滑出,新字元從下方滑入,逐字形成快速而流暢的波動。
切換過程中不要讓文字框尺寸跳動,並且只向螢幕閱讀器朗讀新文字。ABCDEFGHI
Morphing Text (文字變形)
別稱 Text Morph
一個詞在同一位置模糊並融合成下一個詞。
適用情境
首屏標語
在[套用位置]加入「文字變形」(Morphing Text) 效果,也叫 text morph。
一個詞在同一位置變模糊,以柔和、黏稠的方式融合成下一個詞,然後停留片刻再進行下一次切換。
詞語之間無縫循環,讓螢幕閱讀器把這些詞當作一般文字讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。AGBHCIDJEKFL
將滑鼠移到上面
Text 3D Flip (3D 翻轉文字)
別稱 3D Flip Text Reveal
字母或單字繞軸做 3D 翻轉,露出背面的下一段文字。
適用情境
滑鼠懸停連結、標題
在[套用位置]加入「3D 翻轉文字」(Text 3D Flip) 懸停效果,也叫 3D flip text reveal。
游標移到文字上時,每個字母繞水平軸做 3D 翻轉,露出另一面的新字母,一個接一個快速流暢地掃過;游標移開時再翻回來。
翻轉過程中保持文字框尺寸不變,鍵盤聚焦時也顯示同樣的效果。0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (里程表數字)
別稱 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
數字變化時,每一位都縱向捲動到新的值。
適用情境
即時計數器、價格
在[套用位置]加入「里程表數字」(Odometer) 數字動畫,也叫 rolling numbers 或拉霸數字 (slot-machine digits)。
數值變化時,每一位都縱向捲動到新的數字,一律往前捲動,各位之間稍微錯開,結尾有輕微的回穩。
讓每一位數字寬度相同,避免整個數字位移;只提供最終數值給螢幕閱讀器。Text 中的其他動效
ABCDEF
Animated Gradient Text (動態漸層文字)
別稱 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
文字以漸層填色,顏色持續變換或流動。
適用情境
品牌標題
在[套用位置]加入「動態漸層文字」(Animated Gradient Text) 效果,也叫極光文字 (aurora text) 或 rainbow text sweep。
文字以漸層填色,顏色在文字上緩慢、流暢地流動,無縫地無限循環。
任何時刻文字都要在背景上清楚易讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓顏色保持靜止。ABCDEF
將滑鼠移到上面
Glitch Text (故障文字)
別稱 Text Glitch, RGB Split Glitch
文字像訊號故障一樣抖動,出現切片錯位和紅青色分離。
適用情境
賽博龐克或遊戲風格標題
在[套用位置]加入「故障文字」(Glitch Text) 滑鼠懸停效果,也叫 text glitch 或 RGB 分離故障 (RGB split glitch)。
游標停在文字上時,文字以快速、俐落的陣發方式抖動:細細的橫向切片左右跳動,兩份彩色副本像訊號故障一樣錯開;游標移開後恢復原狀。
真正的文字在文件中只保留一份,避免螢幕報讀器讀出副本;鍵盤聚焦時也顯示同樣的效果。ABCDEF
將滑鼠移到上面
Holographic Text (全像文字)
別稱 Holographic Foil Text
文字呈現流轉的彩虹箔片反光,隨游標或時間移動。
適用情境
質感卡片
在[套用位置]加入「全像文字」(Holographic Text) 滑鼠懸停效果,也叫全像箔片文字 (holographic foil text)。
游標停在文字上時,一道箔片般的彩色光帶在字母上緩慢、流暢地來回滑動;游標移開後,文字恢復原本的樸素樣子。
光澤流動的任何時刻文字都要清楚易讀;鍵盤聚焦時也顯示同樣的效果。