Magnifier Lens (放大鏡)
別稱 Lens, Loupe, Lens (Magnifier), Hover zoom lens
圓形鏡片跟隨游標，顯示圖片局部的放大畫面。
適用情境
商品詳情圖
變體
- Lens
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「放大鏡」(Magnifier Lens)，也叫 lens 或 loupe。
一個圓形鏡片無延遲地緊貼在游標正下方，顯示其下方那部分圖片的放大畫面。
放大畫面要與游標下的確切位置對齊；在觸控裝置上，手指按住圖片時顯示鏡片。相似的動效
將滑鼠移到上面
Hover Zoom (懸停縮放)
別稱 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
懸停時圖片在框內放大，有時還會隨游標平移。
適用情境
產品卡片、縮圖
在[套用位置]加入「懸停縮放」(Hover Zoom) 效果，也叫 image zoom on hover 或 zoom-pan。
游標停在圖片上時，圖片在框內緩慢平順地放大，框的尺寸保持不變；游標移開後平順復原。
把圖片裁切在框內，不要溢出版面；鍵盤焦點時也呈現同樣的放大效果。- 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
- B
- C
- D
ABCD
移動指標試試
Cursor Image Hover (游標圖片懸停)
別稱 Hover image follow, Image preview on hover
游標停在文字清單項目上時，一張預覽圖片跟著游標移動。
適用情境
專案清單、選單
在[套用位置]加入「游標圖片懸停」(Cursor Image Hover) 效果，也叫 hover image follow 或懸停圖片預覽 (image preview on hover)。
游標停在文字清單項目上時，該項目的一張小預覽圖浮在游標旁邊，帶著輕微、流暢的延遲跟隨游標；游標移到另一個項目時，預覽圖滑動切換到下一張。
預覽圖絕不能擋住清單的點擊；在觸控和鍵盤操作下，即使沒有預覽圖，清單也要完全可用。Image & Media 中的其他動效
A
B
拖曳試試
Before-After Slider (前後對比滑桿)
別稱 Image comparison slider, Compare slider
拖曳分隔線，一側顯示一張圖片，另一側顯示另一張。
適用情境
照片修圖、產品比較
在[套用位置]加入「前後對比滑桿」(Before-After Slider)，也叫 image comparison slider 或 compare slider。
兩張圖片上下疊放，拖曳一條垂直分隔線時，一張露出更多、另一張露出更少；分隔線緊跟游標，沒有延遲。
分隔線一開始位於中間，並支援觸控和方向鍵操作。在裡面捲動
Image Reveal Wipe (圖片擦除顯現)
別稱 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
遮罩收縮或遮色片邊緣擴展，逐漸露出圖片。
適用情境
捲動時出現的編輯類配圖
在[套用位置]加入「圖片擦除顯現」(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
圖片捲動進入畫面時，遮罩從一側擦除，隨捲動進度平順地露出圖片，並在圖片離開畫面之前早早完全展開。
預留圖片所占空間，避免版面跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，直接完整顯示圖片。