提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果,也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動,游標移入時淡入,移出時淡出。
光暈放在卡片內容的後面,讓文字保持清楚易讀;在觸控裝置上則不顯示光暈。相似的動效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移動指標試試
Cursor Spotlight (游標聚光燈)
別稱 Flashlight cursor, Spotlight effect
游標周圍的一圈光照亮內容,其餘部分維持暗色。
適用情境
主視覺區塊、揭示效果
在[套用位置]加入「游標聚光燈」(Cursor Spotlight) 效果,也叫手電筒游標 (flashlight cursor) 或聚光燈效果 (spotlight effect)。
一圈柔和的光跟隨游標,照亮下方的內容,區域內其餘部分維持變暗。
在觸控裝置上沒有可跟隨的游標,改為直接完整照亮顯示內容。A
移動指標試試
Glare / Holographic Card (炫光全像卡片)
別稱 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一樣隨游標在卡片表面移動。
適用情境
高級卡片或收藏卡
在[套用位置]加入「炫光全像卡片」(Glare / Holographic Card) 效果,也叫 glare card 或 glare hover。
一道柔和明亮的高光隨游標在卡片表面移動,像光線在上面反射,同時卡片朝游標方向微微傾斜;游標移開後兩者都淡出:平順而含蓄。
讓點擊能穿透高光層,確保底下的內容清楚易讀;在觸控裝置上顯示不帶高光的卡片。ABCDEFGHIJKL
移動指標試試
Text Reveal Card (文字顯現卡片)
別稱 Spotlight Text Reveal
在卡片上移動游標時,遮罩邊緣或聚光燈下隱藏的文字隨之顯露。
適用情境
功能卡片
在[套用位置]加入「文字顯現卡片」(Text Reveal Card) 效果,也叫聚光燈文字顯現 (spotlight text reveal)。
游標在卡片上移動時,一條垂直邊緣緊緊跟隨,在一側露出隱藏的文字:流暢、直接,沒有延遲。
在沒有游標可跟隨的觸控裝置上,讓拖曳或輕觸也能顯示隱藏文字,並讓隱藏文字可被螢幕閱讀器讀取。Spotlight (聚光燈)
別稱 Spotlight sweep, Light cone
一道柔和的錐形光或光斑掃入到位,照亮背景的一部分。
適用情境
主視覺標題
在[套用位置]加入「聚光燈」(Spotlight) 效果,也叫 spotlight sweep 或 light cone。
頁面載入時,一道柔和的錐形光從角落斜斜掃進來,停在標題上方,到位時逐漸變亮:緩慢而流暢。
只播放一次;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示已照在標題上的光。Hover 中的其他動效
A
將滑鼠移到上面
Curl (頁角捲起)
別稱 Page curl
懸停時,元素的一角像翻頁一樣捲起。
適用情境
卡片、便條
在[套用位置]加入「頁角捲起」(Curl) 懸停效果,也叫翻頁捲角 (page curl)。
元素的一角像翻頁一樣平順地捲起,露出摺角的背面,游標移開後再恢復平整。
摺角要小,不要遮住重要內容,鍵盤焦點時也呈現同樣的效果。A
B
移動指標試試
Direction Aware Hover (方向感知懸停)
別稱 Direction-aware overlay
遮罩層從游標進入的一側滑入,並朝游標離開的一側滑出。
適用情境
圖片藝廊、作品集網格
在[套用位置]加入「方向感知懸停」(Direction Aware Hover) 效果,也叫方向感知遮罩 (direction-aware overlay)。
遮罩層從游標進入的那一側滑入,再朝游標離開的那一側滑出:快速、流暢。
依據游標進入和離開時的位置判斷方向;觸控或鍵盤焦點時則統一使用一個預設方向。ABCDE
移動指標試試
Dock Magnification (Dock 放大)
別稱 Dock
游標靠近時,一排圖示平順放大,就像 macOS 的 Dock。
適用情境
圖示工具列、導覽
在[套用位置]加入「Dock 放大」(Dock Magnification) 效果,也叫 Dock (dock)。
游標越靠近,這一排圖示就平順地放大,最近的圖示最大、相鄰的圖示稍微放大;游標移開後全部恢復原本大小。
圖示從固定的基準線向上放大;在觸控和鍵盤操作時,每個圖示都要以正常大小正常可用。