提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果，也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時，一條滿版寬度的線從底邊正下方往上滑入定位，移開後再往下滑出視線：快速而流暢。
在邊緣處裁切線條，讓它以滑入而不是淡入或伸長的方式出現，鍵盤焦點時也呈現同樣的效果。相似的動效
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
將滑鼠移到上面
游標懸停時文字上方出現一條線，從左側、中間或右側延伸開來。
適用情境
導覽連結、分頁
在[套用位置]加入「上邊線延伸」(Overline Grow) 懸停效果。
游標懸停時，文字上方的線從中間往兩側延伸，游標移開後再縮回中間：快速而流暢。
預留線條的空間，避免文字位移；鍵盤聚焦時也顯示同樣的效果。ABC DEFG HIJ KL
Text Highlighter (文字螢光筆)
別稱 Highlight Marker, Marker Underline, Hero Highlight
一條螢光筆般的色帶劃過詞句，將其突顯強調。
適用情境
強調關鍵詞句
在[套用位置]加入「文字螢光筆」(Text Highlighter) 效果，也叫螢光標記 (highlight marker) 或麥克筆底線 (marker underline)。
一條螢光筆般的色帶從左到右平順地劃過關鍵詞句的背後，就像有人用筆把它畫起來。
在詞句捲動進入畫面時只播放一次，確保色帶上的文字清楚易讀，並且在詞句換成兩行時讓色帶正確跟隨。ABC
點擊試試
Tab Indicator Slide (頁籤指示器滑動)
別稱 Sliding underline, Active tab indicator, Segmented control pill
底線或膠囊形背景從舊頁籤滑動到新選取的頁籤。
適用情境
頁籤列、分段控制項
在[套用位置]加入「頁籤指示器滑動」(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
選取新頁籤時，底線從舊頁籤滑到新頁籤，快速並平順減速；如果兩個頁籤寬度不同，就順勢伸縮到新頁籤的寬度。
保持正確的頁籤語意並支援方向鍵切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，指示器就直接移過去，不做滑動。Hover 中的其他動效
A
移動指標試試
游標在卡片上移動時，卡片隨之輕微平移和縮放。
適用情境
促銷卡片
在[套用位置]加入「搖晃卡片」(Wobble Card) 效果。
游標在卡片上移動時，卡片朝游標方向輕微平移，內容則朝反方向輕微平移並略微放大，平順地跟隨；游標移開後一切回到原位。
保持幅度很小；在觸控裝置上關閉，如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，也要關閉。A
將滑鼠移到上面
彩色背景從一側掃入，帶有彈性的輕微過衝。
適用情境
按鈕
在[套用位置]加入「背景彈性掃過」(Background Bounce Sweep) 懸停效果。
新的背景色從一側掃入，帶著彈性稍微越過另一側邊緣後再回穩，同時文字顏色跟著切換以維持可讀性；游標移開時平順地滑出。
讓文字始終位於填色之上，鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Background Fade (背景色漸變)
別稱 Color Fade
懸停時，背景色和文字顏色交叉漸變為新的顏色。
適用情境
按鈕、導覽項目
在[套用位置]加入「背景色漸變」(Background Fade) 懸停效果，也叫顏色漸變 (color fade)。
游標停在元素上時，背景色和文字顏色平順地交叉漸變為新顏色，移開後再漸變回來：沉穩，不帶任何位移。
兩種狀態下都要讓文字和背景保有足夠的對比，鍵盤焦點時也呈現同樣的效果。