提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果,也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大,短暫超過最終尺寸後再回穩;游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。A
將滑鼠移到上面
Grow (放大)
別稱 Scale Up, Zoom In on hover
游標停在元素上時,元素平順地略微放大。
適用情境
按鈕、連結、縮圖
在[套用位置]加入「放大」(Grow) 懸停效果,也叫放大縮放 (scale up)。
游標停在元素上時,元素平順地略微放大,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
Bounce In (彈跳入場)
別稱 Bounce In Down, Bounce In Up
元素以超出後回落的彈跳方式進場,可以是放大出現,也可以從邊緣落下。
適用情境
通知徽章、活潑的彈出視窗
在[套用位置]加入「彈跳入場」(Bounce In) 進場動畫,也叫 bounce in down 或 bounce in up。
元素從小逐漸放大,略微超過完整尺寸後晃動幾下再穩定下來:快速、有彈性。
只播放一次,以免一直搶走注意力;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接在原位顯示、不做動畫。A
點擊試試
Press (Button Tap Scale) (按下縮放)
別稱 Tap feedback, Active scale, Press state
按下時元素略微縮小,放開後帶彈性地恢復。
適用情境
按鈕、卡片
在[套用位置]加入「按下縮放」(Press (Button Tap Scale)) 效果,也叫點按回饋 (tap feedback) 或按下狀態 (press state)。
按下時元素略微縮小並稍微變暗,放開後帶一點彈跳恢復原本大小:快速、含蓄。
用鍵盤按下和觸控時也顯示同樣的回饋,並保持周圍版面不位移。Hover 中的其他動效
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)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動,游標移入時淡入,移出時淡出。
光暈放在卡片內容的後面,讓文字保持清楚易讀;在觸控裝置上則不顯示光暈。A
將滑鼠移到上面
Curl (頁角捲起)
別稱 Page curl
懸停時,元素的一角像翻頁一樣捲起。
適用情境
卡片、便條
在[套用位置]加入「頁角捲起」(Curl) 懸停效果,也叫翻頁捲角 (page curl)。
元素的一角像翻頁一樣平順地捲起,露出摺角的背面,游標移開後再恢復平整。
摺角要小,不要遮住重要內容,鍵盤焦點時也呈現同樣的效果。