提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「斜切」(Skew) 懸停效果。
游標停在元素上時,元素向一側斜切成輕微傾斜的樣子,移開後恢復端正:快速而流暢。
傾斜時文字仍要清楚易讀,不要讓周圍的版面產生位移,鍵盤焦點時也呈現同樣的效果。相似的動效
A
將滑鼠移到上面
游標懸停時元素旋轉幾度。
適用情境
圖示、縮圖
在[套用位置]加入「旋轉」(Rotate) 懸停效果。
游標懸停時,元素順時針輕微轉動,游標移開後轉回:流暢而含蓄。
避免周圍版面位移;鍵盤聚焦時也顯示同樣的效果。A
Jello (果凍晃動)
別稱 Jelly
元素像晃動的果凍一樣來回傾斜變形,幅度逐漸減小。
適用情境
俏皮地強調按鈕或 Logo
在[套用位置]加入「果凍晃動」(Jello) 提示效果,也叫 jelly。
元素要像晃動的果凍一樣來回傾斜變形:一開始幅度大,接著很快平息下來。
觸發時只播放一次,並維持元素佔用的空間不變,避免周圍內容位移。A
Light Speed In (光速入場)
別稱 Lightspeed In
元素帶著傾斜從側面疾速衝入,落定時恢復端正。
適用情境
橫幅或標題的戲劇性進場
在[套用位置]加入「光速入場」(Light Speed In) 進場動畫,也叫 lightspeed in。
元素像高速飛馳般傾斜著從側面疾速衝入,傾斜先反向過頭一次,落定時恢復端正:快速且具戲劇性,結尾減速。
元素還在畫面外時不要產生水平捲軸;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接在原位顯示、不做動畫。Hover 中的其他動效
A
將滑鼠移到上面
Speech Bubble (對話泡泡)
別稱 Bubble
懸停時,元素一側出現一個對話泡泡的小三角。
適用情境
分頁標籤、工具提示
在[套用位置]加入「對話泡泡」(Speech Bubble) 懸停效果,也叫泡泡 (bubble)。
一個小三角尾巴從元素一側的後方滑出,讓元素變成對話泡泡的形狀,游標移開後再滑回去:快速而流暢。
尾巴要和元素同色,看起來是一個整體,鍵盤焦點時也呈現同樣的效果。A
將滑鼠移到上面
懸停時,元素邊緣內側出現一條內框線。
適用情境
按鈕、卡片
在[套用位置]加入「內框線」(Trim) 懸停效果。
游標停在元素上時,一條細線在元素邊緣內側淡入,移開後淡出:含蓄,不帶位移。
線條要放在元素內部,保持元素尺寸不變,鍵盤焦點時也呈現同樣的效果。ABC
將滑鼠移到上面
Underline Reveal (底線顯現)
別稱 Overline Reveal, Reveal
一條線從底邊或頂邊滑入定位,為元素加上底線或頂線。
適用情境
導覽連結、按鈕
在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果,也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時,一條滿版寬度的線從底邊正下方往上滑入定位,移開後再往下滑出視線:快速而流暢。
在邊緣處裁切線條,讓它以滑入而不是淡入或伸長的方式出現,鍵盤焦點時也呈現同樣的效果。