提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「邊框漣漪」(Border Ripple) 懸停效果。
游標移入時,幾道邊框圓環依序從元素向外擴散並淡出:快速輕盈,像漣漪一樣。
每次懸停只播放一次、不要循環,也不要讓圓環推擠周圍的版面。相似的動效
A
將滑鼠移到上面
游標懸停時外框線從元素往外擴張,或往元素收縮。
適用情境
按鈕
在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣,接著往外擴張,在四周留出一小圈間隙,懸停期間維持不變,游標移開後再收回:流暢而快速。
繪製外框時不要改變元素尺寸,也不要推擠周圍內容;鍵盤聚焦時也顯示同樣的效果。A
Ping (雷達波)
別稱 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
元素的副本反覆放大並淡出,就像雷達波紋。
適用情境
通知小圓點、即時狀態
在[套用位置]加入「雷達波」(Ping) 效果,也叫 radar ping 或脈衝環 (pulse ring)。
元素的一個副本要向外擴大並淡出,以穩定的節奏一次又一次重複,而元素本身保持不動。
把圓環畫在獨立的圖層上,確保它絕不影響版面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。A
Ripple Rings (漣漪圓環)
別稱 Background ripple, Concentric ripples
同心圓從中心點向外擴散並逐漸淡出。
適用情境
主視覺中心元素、音訊或配對視覺
在[套用位置]加入「漣漪圓環」(Ripple Rings) 效果,也叫 background ripple 或 concentric ripples。
圓環從中心點不斷向外擴散,越大越淡,一個接一個、間距均勻:緩慢而穩定。
中心元素保持靜止、位置不變;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止漣漪。Hover 中的其他動效
A
將滑鼠移到上面
Bounce Scale (彈性縮放)
別稱 Bounce In / Out
懸停開始或結束時,元素帶著彈性過衝進行縮放。
適用情境
按鈕、徽章
在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果,也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大,短暫超過最終尺寸後再回穩;游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。ABCDEF
移動指標試試
Card Hover Effect (卡片懸停效果)
別稱 Sliding highlight card grid
高亮背景在網格中的卡片之間滑動,跟著目前懸停的卡片移動。
適用情境
卡片網格、功能列表
在[套用位置]加入「卡片懸停效果」(Card Hover Effect),也叫滑動高亮卡片網格 (sliding highlight card grid)。
柔和的高亮背景出現在懸停卡片的後方,游標移到哪張卡片就平順地滑到哪裡,游標離開網格時淡出。
鍵盤焦點也要以同樣方式移動高亮,卡片本身保持不動。A
移動指標試試
Card Spotlight (卡片聚光燈)
別稱 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的放射狀光線跟著游標在卡片表面移動,照亮下方的背景。
適用情境
功能卡片、便當網格
在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果,也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動,游標移入時淡入,移出時淡出。
光暈放在卡片內容的後面,讓文字保持清楚易讀;在觸控裝置上則不顯示光暈。