Glare / Holographic Card (炫光全像卡片)
別稱 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一樣隨游標在卡片表面移動。
適用情境
高級卡片或收藏卡
變體
- Glare Card
- Glare Hover
- glare option in vanilla-tilt
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「炫光全像卡片」(Glare / Holographic Card) 效果，也叫 glare card 或 glare hover。
一道柔和明亮的高光隨游標在卡片表面移動，像光線在上面反射，同時卡片朝游標方向微微傾斜；游標移開後兩者都淡出：平順而含蓄。
讓點擊能穿透高光層，確保底下的內容清楚易讀；在觸控裝置上顯示不帶高光的卡片。相似的動效
A
移動指標試試
Card Spotlight (卡片聚光燈)
別稱 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的放射狀光線跟著游標在卡片表面移動，照亮下方的背景。
適用情境
功能卡片、便當網格
在[套用位置]加入「卡片聚光燈」(Card Spotlight) 效果，也叫聚光懸停 (spotlight hover)、游標光暈 (pointer glow)、跟隨滑鼠的光暈 (mouse-following glow) 或放射狀漸層懸停 (radial gradient hover)。
柔和、淡淡的放射狀光暈跟著游標在卡片表面移動，游標移入時淡入，移出時淡出。
光暈放在卡片內容的後面，讓文字保持清楚易讀；在觸控裝置上則不顯示光暈。ABCDEF
將滑鼠移到上面
Holographic Text (全像文字)
別稱 Holographic Foil Text
文字呈現流轉的彩虹箔片反光，隨游標或時間移動。
適用情境
質感卡片
在[套用位置]加入「全像文字」(Holographic Text) 滑鼠懸停效果，也叫全像箔片文字 (holographic foil text)。
游標停在文字上時，一道箔片般的彩色光帶在字母上緩慢、流暢地來回滑動；游標移開後，文字恢復原本的樸素樣子。
光澤流動的任何時刻文字都要清楚易讀；鍵盤聚焦時也顯示同樣的效果。A
移動指標試試
3D Tilt (3D 傾斜)
別稱 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
卡片朝游標方向透視旋轉，分層內容從表面浮起。
適用情境
產品卡片和價格卡片
在[套用位置]加入「3D 傾斜」(3D Tilt) 效果，也叫 perspective tilt 或 tilt card。
游標移動時，卡片朝游標方向透視傾斜，內部各層以不同深度從表面浮起；游標移開後平順地恢復平放：平順而含蓄。
傾斜幅度要小，確保文字易讀；在觸控裝置上，以及使用者開啟了「減少動態效果」(prefers-reduced-motion)時，讓卡片保持平放。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)，就不要播放。3D & Depth 中的其他動效
ABCDEF
點擊試試
3D Carousel (3D 輪播)
別稱 Rotating ring carousel
排成環形的面板在 3D 空間中繞垂直軸旋轉。
適用情境
圖庫和產品展示
在[套用位置]加入「3D 輪播」(3D Carousel)，也叫 rotating ring carousel。
把面板排成透視下的環形；每次按「下一個」，整個環繞垂直軸平順轉動，把下一塊面板轉到正前方。
控制項要能用鍵盤操作，並向螢幕閱讀器報讀目前面板；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，改用簡單的淡入淡出。3D Globe (3D 地球儀)
別稱 Interactive globe
帶有標記點或弧線的 3D 地球在版面中旋轉。
適用情境
呈現全球布局的視覺
在[套用位置]加入「3D 地球儀」(3D Globe)，也叫互動地球儀 (interactive globe)。
表面有幾個標記點的地球儀繞軸緩慢等速轉動，標記點隨之一起轉：平靜而連續。
把它當作裝飾，為其呈現的資訊提供文字替代；移出畫面時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止旋轉。A
將滑鼠移到上面
3D Pin (3D 圖釘)
別稱 Pin hover 3D
懸停時卡片向後透視傾斜，同時一枚圖釘和光暈朝觀看者升起。
適用情境
連結預覽卡片
在[套用位置]加入「3D 圖釘」(3D Pin) 懸停效果，也叫 pin hover 3D。
游標停在卡片上時，卡片向後透視傾斜，同時一枚底部帶柔和光暈的圖釘從中心升起；游標移開後一切復原：平順，不要彈跳。
保持卡片在版面中所占空間不變，鍵盤焦點時也呈現同樣的效果。