提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「上邊線延伸」(Overline Grow) 懸停效果。
游標懸停時,文字上方的線從中間往兩側延伸,游標移開後再縮回中間:快速而流暢。
預留線條的空間,避免文字位移;鍵盤聚焦時也顯示同樣的效果。相似的動效
ABC DEF
將滑鼠移到上面
Underline Draw (底線繪製)
別稱 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
懸停時,連結下方的底線從一側或中間延伸出來。
適用情境
導覽連結、文內連結
在[套用位置]加入「底線繪製」(Underline Draw) 懸停效果,也叫動畫底線 (animated underline) 或懸停底線動畫 (hover underline animation)。
游標停在連結上時,文字下方的底線從左到右平順延伸,游標移開後再收回:快速而含蓄。
不要讓底線推擠周圍版面,並且在鍵盤焦點時呈現同樣的效果。ABC
將滑鼠移到上面
Underline Reveal (底線顯現)
別稱 Overline Reveal, Reveal
一條線從底邊或頂邊滑入定位,為元素加上底線或頂線。
適用情境
導覽連結、按鈕
在[套用位置]加入「底線顯現」(Underline Reveal) 懸停效果,也叫頂線顯現 (overline reveal) 或顯現 (reveal)。
游標停在元素上時,一條滿版寬度的線從底邊正下方往上滑入定位,移開後再往下滑出視線:快速而流暢。
在邊緣處裁切線條,讓它以滑入而不是淡入或伸長的方式出現,鍵盤焦點時也呈現同樣的效果。Hover 中的其他動效
A
將滑鼠移到上面
元素快速放大,再帶著彈性「啵」地回到原樣。
適用情境
圖示、按鈕
在[套用位置]加入「輕彈」(Pop) 懸停效果。
每次游標移入時,元素快速鼓起一次再回到正常大小,像一次帶彈性的輕快彈跳。
每次懸停只播放一次,不要停在放大狀態,也不要循環;避免周圍版面位移。A
將滑鼠移到上面
元素往內一沉再彈回,彷彿按下了一顆實體按鈕。
適用情境
按鈕
在[套用位置]加入「按壓」(Push) 懸停效果。
每次游標移入時,元素快速縮小一次再彈回正常大小,就像按下一顆實體按鈕。
每次懸停只播放一次,不要循環;避免周圍版面位移。A
將滑鼠移到上面
Radial Fill (圓形填充)
別稱 Circle expand
游標懸停時一個彩色圓形從中心放大或往中心收縮,填滿元素。
適用情境
按鈕
在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果,也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素,游標移開後再縮回中心,同時文字顏色隨之切換,保持清楚易讀。
圓形要裁切在元素形狀之內,文字位在它上方;鍵盤聚焦時也顯示同樣的效果。