提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字螢光筆」(Text Highlighter) 效果,也叫螢光標記 (highlight marker) 或麥克筆底線 (marker underline)。
一條螢光筆般的色帶從左到右平順地劃過關鍵詞句的背後,就像有人用筆把它畫起來。
在詞句捲動進入畫面時只播放一次,確保色帶上的文字清楚易讀,並且在詞句換成兩行時讓色帶正確跟隨。相似的動效
在裡面捲動
文字捲動進入畫面時,一個指標箭頭圍繞某個詞畫出醒目框。
適用情境
標題、行銷文案
在[套用位置]加入「指標框選」(Pointer Highlight) 效果。
文字捲動進入畫面時,一個方框從左到右圍繞關鍵詞畫出,同時一個小指標箭頭沿著方框的角移動,流暢、等速,就像有人用手圈出這個詞。
只在第一次進入畫面時畫一次,不要推擠文字;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示畫好的方框。ABC DEF
將滑鼠移到上面
Underline Draw (底線繪製)
別稱 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
懸停時,連結下方的底線從一側或中間延伸出來。
適用情境
導覽連結、文內連結
在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果,也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時,文字下方的底線從左到右平順延伸,游標移開後再收回:快速而含蓄。
不要讓底線推擠周圍版面,並且在鍵盤焦點時呈現同樣的效果。ABC
將滑鼠移到上面
Underline Reveal (底線顯現)
別稱 Overline Reveal, Reveal
一條線從底邊或頂邊滑入定位,為元素加上底線或頂線。
適用情境
導覽連結、按鈕
在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果,也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時,一條滿版寬度的線從底邊正下方往上滑入定位,移開後再往下滑出視線:快速而流暢。
在邊緣處裁切線條,讓它以滑入而不是淡入或伸長的方式出現,鍵盤焦點時也呈現同樣的效果。Text 中的其他動效
ABCDABCD
將滑鼠移到上面
Text Hover Effect (文字懸停效果)
別稱 Gradient Outline Text Hover, Text Fill on Hover
描邊文字被跟隨指標或橫掃而過的漸層填滿或點亮。
適用情境
大型展示文字、頁尾
在[套用位置]加入「文字懸停效果」(Text Hover Effect),也叫懸停文字填色 (text fill on hover) 或漸層描邊文字懸停 (gradient outline text hover)。
文字一開始只有描邊;游標停在上面時,實色填滿從左到右平順地掃入,游標移開後再退回去。
填色前的描邊文字也要清楚易讀,並且在鍵盤焦點時呈現同樣的效果。在裡面捲動
Text Path Scroll (路徑文字捲動)
別稱 Text Path Curve Scroll Animation
文字沿曲線路徑排列,並隨使用者捲動沿路徑移動。
適用情境
敘事型區塊
在[套用位置]加入「路徑文字捲動」(Text Path Scroll) 效果,也叫 text path curve scroll animation。
文字排在一條曲線上,隨使用者捲動沿曲線滑動:往下捲動時前進,往上捲動時後退。
讓移動直接綁定捲動位置、沒有延遲,並讓螢幕閱讀器把它當作一般文字讀取。ABCABCABCABCABC
在裡面捲動
Text Repetition (文字重複)
別稱 Repeated Text Scroll
一個詞被複製成許多層疊的副本,隨捲動錯開移動。
適用情境
作品集標題
在[套用位置]加入「文字重複」(Text Repetition) 效果,也叫 repeated text scroll。
把一個詞複製成一疊更淡的描邊副本,隨使用者捲動從它身後展開,往上捲動時再收攏回去。
讓展開程度直接綁定捲動位置,並對螢幕閱讀器隱藏多餘的副本,讓這個詞只被讀一次。