提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「浮起」(Float) 懸停效果,也叫抬升 (lift) 或升起 (raise)。
游標停在元素上時,元素輕輕向上浮起並維持,游標移開後再落回:平順柔和,沒有回彈。
只做視覺上的移動,不要推擠周圍的版面,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
Bob (上下浮動)
別稱 Hang
懸停期間,元素先向上浮起,然後持續上下輕輕浮動。
適用情境
圖示、按鈕
在[套用位置]加入「上下浮動」(Bob) 懸停效果,也叫懸掛 (hang)。
元素先輕輕浮起,游標停留期間持續柔和地上下浮動,游標移開後再落回原位:緩慢而柔和。
只在懸停期間循環浮動;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。A
將滑鼠移到上面
Hover Shadow (懸停陰影)
別稱 Drop Shadow on hover, Elevation on hover
游標懸停時元素下方出現或加深一層柔和陰影,營造浮起的感覺。
適用情境
卡片、按鈕
在[套用位置]加入「懸停陰影」(Hover Shadow) 效果,也叫 drop shadow on hover 或 elevation on hover。
游標懸停時,元素下方的柔和陰影加深並擴散,讓它看起來浮起;游標移開後再淡回原樣,元素本身保持不動。
陰影要夠含蓄,在淺色和深色主題下都合適;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
懸停時,元素向下移動幾個像素,彷彿被按進頁面裡。
適用情境
按鈕
在[套用位置]加入「下沉」(Sink) 懸停效果。
游標停在元素上時,元素略微下移並停住,彷彿被按進頁面裡,移開後再升回原位:平順,沒有回彈。
只在視覺上移動,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。將滑鼠移到上面
Nudge Forward / Backward (前後輕推)
別稱 Arrow nudge
游標懸停時箭頭或元素本身往前或往後滑動幾個像素。
適用情境
下一頁/上一頁連結、箭頭
在[套用位置]加入「前後輕推」(Nudge Forward / Backward) 懸停效果,也叫 arrow nudge。
游標懸停時,箭頭朝它指的方向輕輕滑動一小段,游標移開後滑回:快速、幅度小。
只移動箭頭,不要讓文字或版面跟著位移;鍵盤聚焦時也顯示同樣的效果。Hover 中的其他動效
ABC
移動指標試試
Focus Cards (聚焦卡片)
別稱 Blur siblings on hover, Hover focus blur, Card hover effect
懸停的卡片保持清晰,其餘卡片變得模糊、變暗。
適用情境
卡片網格、藝廊
在[套用位置]加入「聚焦卡片」(Focus Cards) 效果,也叫懸停時模糊其他卡片 (blur siblings on hover)、懸停聚焦模糊 (hover focus blur) 或卡片懸停效果 (card hover effect)。
游標停在某張卡片上時,其他卡片變模糊、變暗並略微縮小,懸停的卡片保持清晰;整個過程平順過渡,游標移開後恢復原狀。
鍵盤焦點時也採用同樣的聚焦效果;沒有懸停任何卡片時,所有卡片都保持清楚易讀。A
將滑鼠移到上面
Glow (發光)
別稱 Neon glow
懸停時,元素周圍出現一圈彩色光暈。
適用情境
按鈕、卡片、圖示
在[套用位置]加入「發光」(Glow) 懸停效果,也叫霓虹光暈 (neon glow)。
游標停在元素上時,元素周圍淡入一圈柔和的彩色光暈,移開後淡出:柔和,不帶位移。
光暈不要影響版面,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Grow (放大)
別稱 Scale Up, Zoom In on hover
游標停在元素上時,元素平順地略微放大。
適用情境
按鈕、連結、縮圖
在[套用位置]加入「放大」(Grow) 懸停效果,也叫放大縮放 (scale up)。
游標停在元素上時,元素平順地略微放大,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。