提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「扭動文字」(Squiggly Text) 效果,也叫 wobbly text 或 turbulence text。
字母邊緣輕微抖動,就像每秒被手工重畫好幾次:是含蓄、細碎的抖動,而不是流暢的波浪。
保持文字可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。相似的動效
ABC
ABC
將滑鼠移到上面
SVG Displacement Distortion (SVG 置換扭曲)
別稱 feTurbulence Distortion, Displacement Map Effect
SVG 濾鏡用動態雜訊讓文字或形狀產生扭曲。
適用情境
液體或漣漪懸停效果
在[套用位置]加入「SVG 置換扭曲」(SVG Displacement Distortion) 懸停效果,也叫置換貼圖效果 (displacement map effect)。
游標移上去時,文字或形狀像隔著流動的水一樣蕩漾晃動,效果柔和地漸入;游標移開後恢復清晰。
只在效果啟用時套用扭曲濾鏡,靜止時不產生任何負擔;鍵盤聚焦時也顯示同樣的效果。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
別稱 Organic Text Distortion
文字隨捲動或游標移動自然地扭曲、起伏。
適用情境
實驗性作品集
在[套用位置]加入「文字扭曲」(Text Distortion) 效果,也叫 organic text distortion。
一行文字不斷橫向流動,同時自然地扭曲、起伏,彷彿隔著流動的水去看,流動由使用者的捲動驅動。
扭曲要夠輕,確保文字可讀,在較慢的裝置上也要流暢;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉此效果。ABCDEF
字母向下滴落、拉長,彷彿正在融化。
適用情境
恐怖或趣味標題
在[套用位置]加入「融化文字」(Melting Text) 效果。
字母緩慢向下塌陷,下方拉出滴落的液滴,彷彿正在融化,最後停在靜止的融化樣貌。
文字進入畫面時只播放一次,結束時保持文字可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不做動畫。Text 中的其他動效
ABC DEFGHI JKLMNO PQR
在裡面捲動
Sticky Text Fade (固定文字淡入淡出)
別稱 Sticky Scroll Text Opacity Fade
文字固定不動,各行隨捲動進度淡入淡出。
適用情境
捲動敘事
在[套用位置]加入「固定文字淡入淡出」(Sticky Text Fade) 效果,也叫 sticky scroll text opacity fade。
該區塊捲動期間,文字區塊固定在原位,各行隨捲動進度逐行淡入淡出。
讓淡入淡出直接跟隨捲動位置,往回捲動時隨之反轉;無論透明度如何,每一行都要能被螢幕閱讀器讀到。Stroke Text Draw (文字描邊繪製)
別稱 Draw In Text, Animated Stroke Text
先以描邊畫出字母輪廓,再顯示填色。
適用情境
Logo、首屏大字
在[套用位置]加入「文字描邊繪製」(Stroke Text Draw) 效果,也叫 draw in text 或 animated stroke text。
字母輪廓流暢地逐筆畫出,輪廓完成後填色再淡入。
頁面載入時只播放一次,讓文字保持為可存取的真實文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示已填色的文字。AGBHCIDJEKFL
將滑鼠移到上面
Text 3D Flip (3D 翻轉文字)
別稱 3D Flip Text Reveal
字母或單字繞軸做 3D 翻轉,露出背面的下一段文字。
適用情境
滑鼠懸停連結、標題
在[套用位置]加入「3D 翻轉文字」(Text 3D Flip) 懸停效果,也叫 3D flip text reveal。
游標移到文字上時,每個字母繞水平軸做 3D 翻轉,露出另一面的新字母,一個接一個快速流暢地掃過;游標移開時再翻回來。
翻轉過程中保持文字框尺寸不變,鍵盤聚焦時也顯示同樣的效果。