提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「發光」(Glow) 懸停效果,也叫霓虹光暈 (neon glow)。
游標停在元素上時,元素周圍淡入一圈柔和的彩色光暈,移開後淡出:柔和,不帶位移。
光暈不要影響版面,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
Hover Shadow (懸停陰影)
別稱 Drop Shadow on hover, Elevation on hover
游標懸停時元素下方出現或加深一層柔和陰影,營造浮起的感覺。
適用情境
卡片、按鈕
在[套用位置]加入「懸停陰影」(Hover Shadow) 效果,也叫 drop shadow on hover 或 elevation on hover。
游標懸停時,元素下方的柔和陰影加深並擴散,讓它看起來浮起;游標移開後再淡回原樣,元素本身保持不動。
陰影要夠含蓄,在淺色和深色主題下都合適;鍵盤聚焦時也顯示同樣的效果。ABCDEF
Neon Glow Text (霓虹發光文字)
別稱 Neon Sign Flicker, Glowing Text
文字像霓虹燈管一樣發光,並閃爍或脈動。
適用情境
夜生活、遊戲主題
在[套用位置]加入「霓虹發光文字」(Neon Glow Text) 效果,也叫霓虹招牌閃爍 (neon sign flicker) 或發光文字 (glowing text)。
文字像霓虹燈管一樣發出柔和、穩定的光,偶爾像真實招牌那樣短暫熄滅一下。
閃爍要偶爾出現而不是快速連閃,因為快速閃光可能傷害部分使用者;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持穩定發光。A
將滑鼠移到上面
游標懸停時外框線從元素往外擴張,或往元素收縮。
適用情境
按鈕
在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣,接著往外擴張,在四周留出一小圈間隙,懸停期間維持不變,游標移開後再收回:流暢而快速。
繪製外框時不要改變元素尺寸,也不要推擠周圍內容;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
漸層邊框沿著元素四周流動,游標懸停時向外擴展。
適用情境
按鈕、卡片
在[套用位置]加入「懸停漸層邊框」(Hover Border Gradient) 效果。
一小段漸層亮光停在邊框的某一處;游標懸停時,它沿著邊框等速環繞,同時整圈邊框帶著柔和光暈變亮。
只在懸停時讓邊框動起來;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。Hover 中的其他動效
A
將滑鼠移到上面
Grow (放大)
別稱 Scale Up, Zoom In on hover
游標停在元素上時,元素平順地略微放大。
適用情境
按鈕、連結、縮圖
在[套用位置]加入「放大」(Grow) 懸停效果,也叫放大縮放 (scale up)。
游標停在元素上時,元素平順地略微放大,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Hollow (空心化)
別稱 Ghost fill
游標懸停時填滿的背景消失,只留下外框按鈕。
適用情境
按鈕
在[套用位置]加入「空心化」(Hollow) 懸停效果,也叫 ghost fill。
填滿的背景淡出,只留下外框,文字顏色隨之切換,在空背景上依然清楚易讀:流暢而快速。
兩種狀態的邊框粗細保持一致,避免元素尺寸改變;鍵盤聚焦時也顯示同樣的效果。