提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「圖示旋轉」(Icon Spin) 懸停效果。
游標移入時,元素內的圖示流暢地轉一整圈;游標移開時再轉回去。
只旋轉圖示,不旋轉整個按鈕;鍵盤聚焦時也顯示同樣的效果。相似的動效
Spin (持續旋轉)
別稱 Rotate Loop, Spinner
元素以固定速度持續旋轉。
適用情境
載入中的旋轉指示器
在[套用位置]加入「持續旋轉」(Spin) 效果,也叫 spinner 或 rotate loop。
元素要以固定、均勻的速度持續旋轉,每圈之間不要有緩動。
讓循環無縫銜接,為 spinner 加上無障礙的「載入中」標籤;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就放慢或停止旋轉。A
將滑鼠移到上面
游標懸停時元素旋轉幾度。
適用情境
圖示、縮圖
在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時,元素順時針輕微轉動,游標移開後轉回:流暢而含蓄。
避免周圍版面位移;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
游標懸停時圖示往下掉出視線範圍,再從上方落回。
適用情境
圖示按鈕
在[套用位置]加入「圖示下落」(Icon Drop) 懸停效果。
元素內的圖示往下掉出視線範圍,再從上方落回原位:快速,落地輕柔。
每次游標移入只播放一次,不要循環;標籤和按鈕尺寸保持不變。Hover 中的其他動效
AA
將滑鼠移到上面
游標懸停時按鈕文字滑出,箭頭和填色隨之展開。
適用情境
CTA 按鈕
在[套用位置]加入「懸停互動按鈕」(Interactive Hover Button) 效果。
文字旁的小圓點放大到填滿按鈕,同時文字往一側滑出並淡出,帶箭頭的文字再從新的填色上滑入:流暢而快速。
按鈕尺寸保持固定,文字全程清楚易讀;鍵盤聚焦時也顯示同樣的效果。將滑鼠移到上面
Nudge Forward / Backward (前後輕推)
別稱 Arrow nudge
游標懸停時箭頭或元素本身往前或往後滑動幾個像素。
適用情境
下一頁/上一頁連結、箭頭
在[套用位置]加入「前後輕推」(Nudge Forward / Backward) 懸停效果,也叫 arrow nudge。
游標懸停時,箭頭朝它指的方向輕輕滑動一小段,游標移開後滑回:快速、幅度小。
只移動箭頭,不要讓文字或版面跟著位移;鍵盤聚焦時也顯示同樣的效果。A
將滑鼠移到上面
游標懸停時外框線從元素往外擴張,或往元素收縮。
適用情境
按鈕
在[套用位置]加入「外框擴張」(Outline Expand) 懸停效果。
外框線一開始緊貼元素邊緣,接著往外擴張,在四周留出一小圈間隙,懸停期間維持不變,游標移開後再收回:流暢而快速。
繪製外框時不要改變元素尺寸,也不要推擠周圍內容;鍵盤聚焦時也顯示同樣的效果。