提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「放大」(Grow) 懸停效果,也叫放大縮放 (scale up)。
游標停在元素上時,元素平順地略微放大,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。A
將滑鼠移到上面
Bounce Scale (彈性縮放)
別稱 Bounce In / Out
懸停開始或結束時,元素帶著彈性過衝進行縮放。
適用情境
按鈕、徽章
在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果,也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大,短暫超過最終尺寸後再回穩;游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。將滑鼠移到上面
Hover Zoom (懸停縮放)
別稱 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
懸停時圖片在框內放大,有時還會隨游標平移。
適用情境
產品卡片、縮圖
在[套用位置]加入「懸停縮放」(Hover Zoom) 效果,也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時,圖片在框內緩慢平順地放大,框的尺寸保持不變;游標移開後平順復原。
把圖片裁切在框內,不要溢出版面;鍵盤焦點時也呈現同樣的放大效果。ABCDE
移動指標試試
Dock Magnification (Dock 放大)
別稱 Dock
游標靠近時,一排圖示平順放大,就像 macOS 的 Dock。
適用情境
圖示工具列、導覽
在[套用位置]加入「Dock 放大」(Dock Magnification) 效果,也叫 Dock (dock)。
游標越靠近,這一排圖示就平順地放大,最近的圖示最大、相鄰的圖示稍微放大;游標移開後全部恢復原本大小。
圖示從固定的基準線向上放大;在觸控和鍵盤操作時,每個圖示都要以正常大小正常可用。Hover 中的其他動效
A
將滑鼠移到上面
Hollow (空心化)
別稱 Ghost fill
游標懸停時填滿的背景消失,只留下外框按鈕。
適用情境
按鈕
在[套用位置]加入「空心化」(Hollow) 懸停效果,也叫 ghost fill。
填滿的背景淡出,只留下外框,文字顏色隨之切換,在空背景上依然清楚易讀:流暢而快速。
兩種狀態的邊框粗細保持一致,避免元素尺寸改變;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
漸層邊框沿著元素四周流動,游標懸停時向外擴展。
適用情境
按鈕、卡片
在[套用位置]加入「懸停漸層邊框」(Hover Border Gradient) 效果。
一小段漸層亮光停在邊框的某一處;游標懸停時,它沿著邊框等速環繞,同時整圈邊框帶著柔和光暈變亮。
只在懸停時讓邊框動起來;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。A
將滑鼠移到上面
Hover Shadow (懸停陰影)
別稱 Drop Shadow on hover, Elevation on hover
游標懸停時元素下方出現或加深一層柔和陰影,營造浮起的感覺。
適用情境
卡片、按鈕
在[套用位置]加入「懸停陰影」(Hover Shadow) 效果,也叫 drop shadow on hover 或 elevation on hover。
游標懸停時,元素下方的柔和陰影加深並擴散,讓它看起來浮起;游標移開後再淡回原樣,元素本身保持不動。
陰影要夠含蓄,在淺色和深色主題下都合適;鍵盤聚焦時也顯示同樣的效果。