提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「圓角化」(Round Corners) 懸停效果。
游標停在元素上時,元素的直角平順地變圓,移開後再恢復成直角:柔和而快速。
保持元素尺寸不變,鍵盤焦點時也呈現同樣的效果。相似的動效
Shape Morph (形狀變形)
別稱 Path Morphing, SVG Morph, MorphSVG, Shape Tweening
一個向量形狀平順地變成另一個形狀。
適用情境
圖示狀態切換、首屏主視覺
在[套用位置]加入「形狀變形」(Shape Morph),也叫路徑變形 (path morphing) 或 SVG morph。
一個形狀平順地變成另一個形狀,例如五邊形向內收縮成星形,各個點以均勻、從容的節奏滑到定位。
讓兩個形狀擁有數量相同且一一對應的點,使變形乾淨、不閃爍;每次狀態改變時播放一次,不要循環。Hover 中的其他動效
A
將滑鼠移到上面
Shine Sweep (光澤掃過)
別稱 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
懸停時,一道斜向光帶從元素的一側掃到另一側。
適用情境
按鈕、卡片、徽章
在[套用位置]加入「光澤掃過」(Shine Sweep) 懸停效果,也叫光澤 (sheen)、閃亮按鈕 (shiny button)、懸停掃光 (shine on hover)、閃光 (glint)、微光 (shimmer) 或微光按鈕 (shimmer button)。
游標停在元素上時,一道柔和的斜向光帶從左往右掃過元素,並在短暫停頓後重複。
光帶要裁切在元素內部,游標移開後停止;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不要播放。A
將滑鼠移到上面
Shrink (縮小)
別稱 Scale Down
游標停在元素上時,元素平順地略微縮小。
適用情境
按鈕、方塊
在[套用位置]加入「縮小」(Shrink) 懸停效果,也叫縮小 (scale down)。
游標停在元素上時,元素平順地略微縮小,移開後恢復原本大小:快速而含蓄。
不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
Shutter Fill (百葉窗填充)
別稱 Shutter
懸停時,背景像百葉窗一樣從中間或兩側展開或合攏。
適用情境
按鈕、卡片
在[套用位置]加入「百葉窗填充」(Shutter Fill) 懸停效果,也叫百葉窗 (shutter)。
新的背景色從中間一條直線像百葉窗一樣向兩側展開,游標移開後再往中間合攏,同時文字顏色跟著切換以保持清楚易讀:流暢而快速。
填色要裁切在元素內部,文字保持在上方,鍵盤焦點時也呈現同樣的效果。