提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣,接著往外擴張,在四周留出一小圈間隙,懸停期間維持不變,游標移開後再收回:流暢而快速。
繪製外框時不要改變元素尺寸,也不要推擠周圍內容;鍵盤聚焦時也顯示同樣的效果。相似的動效
A
將滑鼠移到上面
懸停時,同心的邊框圓環從元素向外擴散或向內收縮。
適用情境
按鈕
在[套用位置]加入「邊框漣漪」(Border Ripple) 懸停效果。
游標移入時,幾道邊框圓環依序從元素向外擴散並淡出:快速輕盈,像漣漪一樣。
每次懸停只播放一次、不要循環,也不要讓圓環推擠周圍的版面。A
將滑鼠移到上面
懸停時,元素邊緣內側出現一條內框線。
適用情境
按鈕、卡片
在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時,一條細線在元素邊緣內側淡入,移開後淡出:含蓄,不帶位移。
線條要放在元素內部,保持元素尺寸不變,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Glow (發光)
別稱 Neon glow
懸停時,元素周圍出現一圈彩色光暈。
適用情境
按鈕、卡片、圖示
在[套用位置]加入「發光」(Glow) 懸停效果,也叫霓虹光暈 (neon glow)。
游標停在元素上時,元素周圍淡入一圈柔和的彩色光暈,移開後淡出:柔和,不帶位移。
光暈不要影響版面,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
漸層邊框沿著元素四周流動,游標懸停時向外擴展。
適用情境
按鈕、卡片
在[套用位置]加入「懸停漸層邊框」(Hover Border Gradient) 效果。
一小段漸層亮光停在邊框的某一處;游標懸停時,它沿著邊框等速環繞,同時整圈邊框帶著柔和光暈變亮。
只在懸停時讓邊框動起來;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。Hover 中的其他動效
ABC
將滑鼠移到上面
游標懸停時文字上方出現一條線,從左側、中間或右側延伸開來。
適用情境
導覽連結、分頁
在[套用位置]加入「上邊線延伸」(Overline Grow) 懸停效果。
游標懸停時,文字上方的線從中間往兩側延伸,游標移開後再縮回中間:快速而流暢。
預留線條的空間,避免文字位移;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。A
將滑鼠移到上面
元素往內一沉再彈回,彷彿按下了一顆實體按鈕。
適用情境
按鈕
在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時,元素快速縮小一次再彈回正常大小,就像按下一顆實體按鈕。
每次懸停只播放一次,不要循環;避免周圍版面位移。