提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時,一條細線在元素邊緣內側淡入,移開後淡出:含蓄,不帶位移。
線條要放在元素內部,保持元素尺寸不變,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
游標懸停時外框線從元素往外擴張,或往元素收縮。
適用情境
按鈕
在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣,接著往外擴張,在四周留出一小圈間隙,懸停期間維持不變,游標移開後再收回:流暢而快速。
繪製外框時不要改變元素尺寸,也不要推擠周圍內容;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
懸停時,邊框顏色淡入或漸變為新顏色。
適用情境
按鈕、輸入框
在[套用位置]加入「邊框色漸變」(Border Fade) 懸停效果。
游標停在元素上時,邊框從柔和的顏色平順漸變為強調色:含蓄,不帶位移或尺寸變化。
兩種狀態下的邊框粗細保持一致,避免任何位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Hollow (空心化)
別稱 Ghost fill
游標懸停時填滿的背景消失,只留下外框按鈕。
適用情境
按鈕
在[套用位置]加入「空心化」(Hollow) 懸停效果,也叫 ghost fill。
填滿的背景淡出,只留下外框,文字顏色隨之切換,在空背景上依然清楚易讀:流暢而快速。
兩種狀態的邊框粗細保持一致,避免元素尺寸改變;鍵盤聚焦時也顯示同樣的效果。Hover 中的其他動效
ABC
將滑鼠移到上面
Underline Reveal (底線顯現)
別稱 Overline Reveal, Reveal
一條線從底邊或頂邊滑入定位,為元素加上底線或頂線。
適用情境
導覽連結、按鈕
在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果,也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時,一條滿版寬度的線從底邊正下方往上滑入定位,移開後再往下滑出視線:快速而流暢。
在邊緣處裁切線條,讓它以滑入而不是淡入或伸長的方式出現,鍵盤焦點時也呈現同樣的效果。A
移動指標試試
游標在卡片上移動時,卡片隨之輕微平移和縮放。
適用情境
促銷卡片
在[套用位置]加入「搖晃卡片」(Wobble Card) 效果。
游標在卡片上移動時,卡片朝游標方向輕微平移,內容則朝反方向輕微平移並略微放大,平順地跟隨;游標移開後一切回到原位。
保持幅度很小;在觸控裝置上關閉,如果使用者開啟了「減少動態效果」(prefers-reduced-motion),也要關閉。A
將滑鼠移到上面
彩色背景從一側掃入,帶有彈性的輕微過衝。
適用情境
按鈕
在[套用位置]加入「背景彈性掃過」(Background Bounce Sweep) 懸停效果。
新的背景色從一側掃入,帶著彈性稍微越過另一側邊緣後再回穩,同時文字顏色跟著切換以維持可讀性;游標移開時平順地滑出。
讓文字始終位於填色之上,鍵盤焦點時也呈現同樣的效果。