提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字描邊繪製」(Stroke Text Draw) 效果,也叫 draw in text 或 animated stroke text。
字母輪廓流暢地逐筆畫出,輪廓完成後填色再淡入。
頁面載入時只播放一次,讓文字保持為可存取的真實文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示已填色的文字。相似的動效
Line Drawing (線條繪製)
別稱 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
透過替虛線偏移加上動畫,讓 SVG 描邊看起來沿著路徑被畫出來。
適用情境
圖示、Logo 和插畫
在[套用位置]加入「線條繪製」(Line Drawing) 動畫,也叫路徑繪製 (path drawing) 或自繪 SVG (self-drawing SVG)。
每條描邊看起來沿著路徑從起點到終點流暢地自己畫出來,第二條描邊(例如勾號)緊接在第一條之後。
進入畫面時只播放一次,不要循環;如果使用者開啟了「減少動態效果」(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)。
文字一開始只有描邊;游標停在上面時,實色填滿從左到右平順地掃入,游標移開後再退回去。
填色前的描邊文字也要清楚易讀,並且在鍵盤焦點時呈現同樣的效果。Liquid Fill Text (液體填充文字)
別稱 Water Fill Text
字母中注入不斷上升、起伏蕩漾的液體。
適用情境
載入提示、俏皮標題
在[套用位置]加入「液體填充文字」(Liquid Fill Text) 效果,也叫 water fill text。
外框字母中注滿液體,波浪狀的液面橫向翻滾,液位緩慢地起伏,形成柔和、連續的循環。
單字要保留為真正的文字供螢幕報讀器讀取;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就讓液體停在一個靜止的液位。Text 中的其他動效
AGBHCIDJEKFL
將滑鼠移到上面
Text 3D Flip (3D 翻轉文字)
別稱 3D Flip Text Reveal
字母或單字繞軸做 3D 翻轉,露出背面的下一段文字。
適用情境
滑鼠懸停連結、標題
在[套用位置]加入「3D 翻轉文字」(Text 3D Flip) 懸停效果,也叫 3D flip text reveal。
游標移到文字上時,每個字母繞水平軸做 3D 翻轉,露出另一面的新字母,一個接一個快速流暢地掃過;游標移開時再翻回來。
翻轉過程中保持文字框尺寸不變,鍵盤聚焦時也顯示同樣的效果。ABCDEFGHIJABCDEFGHIJ
Text Distortion (文字扭曲)
別稱 Organic Text Distortion
文字隨捲動或游標移動自然地扭曲、起伏。
適用情境
實驗性作品集
在[套用位置]加入「文字扭曲」(Text Distortion) 效果,也叫 organic text distortion。
一行文字不斷橫向流動,同時自然地扭曲、起伏,彷彿隔著流動的水去看,流動由使用者的捲動驅動。
扭曲要夠輕,確保文字可讀,在較慢的裝置上也要流暢;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉此效果。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (文字生成)
別稱 Text Generate Effect
頁面載入時,文字逐一淡入,常伴隨模糊逐漸消散,彷彿正在生成。
適用情境
AI 風格的開場文案
在[套用位置]加入「文字生成」(Text Generate) 效果。
文字逐一淡入,同時每個詞上的柔和模糊逐漸消散,彷彿文字正在生成:節奏平穩、沉靜。
頁面載入時只播放一次,讓螢幕閱讀器立即讀到完整文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示、不做動畫。