CSS EffectsGallery

淡入淡出、Hover 互動、滾動觸發 — 所有常見的網頁動態效果，一次看完。

0 種效果
Scroll
01 / Entrance Animations

淡入淡出 / 進場效果

頁面載入、元素進場時使用的基礎動畫效果。

FADE
Fade In / Outopacity
UP ↑
Fade UptranslateY
SCALE
Fade Scalescale
SLIDE →
Fade SlidetranslateX
Stagger Fadedelay
Hello World!
Typewritersteps()
BLUR
Blur Revealfilter
BOUNCE
Bounce Inbezier
SPIN
Rotate Inrotate
Skeleton Loadingshimmer
REVEAL
Clip Revealclip-path
Audio WavescaleY
0
Counter UpJS count
FADESLIDESCALEBLURBOUNCEROTATECLIPWAVEFADESLIDESCALEBLURBOUNCEROTATECLIPWAVE
Marqueeinfinite
Spinnersrotate
LIVE
Pulse Ringscale
02 / Hover & Interaction

Hover 互動效果

滑鼠移入時觸發的互動效果，讓介面更有生命力。

GLOW
Glow Hoverhover
MORPH
Shape Morphhover
FILL
Fill Sweephover
3D
3D Tilthover
首頁 Home作品 Works關於 About
Underline Drawhover
Hover me
額外資訊會在滑鼠移入時展開顯示
Card Revealhover
FRONT
BACK
Flip Cardhover
Ripple Buttonclick
Move cursor
Spotlighthover
Image Zoomhover
HOVER
Border Tracehover
SHIFT
Gradient Shifthover
Glass
Glass Cardhover
NEON
Neon Pulsehover
Elastic Buttonhover
HOVER!
Split Texthover
SHAKE
Shakehover
SHIFT
Color Shifthover
GLITCH
Glitch Texthover
01
02
03
04
05
Accordionhover
Design85%
Code65%
Motion92%
Progress Fillhover
PULL
Magnetichover
REVEALED!
Hover me
Curtain Revealhover
Orbitinfinite
03 / Scroll Triggered

滾動觸發效果

繼續往下滾動，看這些卡片如何進場。使用 Intersection Observer API 實現。

Fade Up
最經典的滾動進場，從下方淡入上滑
Fade + Scale
結合縮放的進場，更有層次感
Stagger
多元素交錯進場，有節奏感
Slide In
從左右滑入，適合 timeline 排版
← 從左滑入
translateX(-60px) → 0
從右滑入 →
translateX(60px) → 0
Scale In
scale(0.85) → scale(1)
Rotate In
rotate(-8deg) → rotate(0)
Blur In
blur(12px) → blur(0)
卡片 A
依序進場的第一張
卡片 B
延遲 0.12 秒
卡片 C
延遲 0.24 秒
卡片 D
延遲 0.36 秒
卡片 E
延遲 0.48 秒
卡片 F
延遲 0.60 秒