アニメーションギャラリー
カードをクリックするとHTML/CSSコードを取得できます
Card
Continuous Animation
Floating Box
Keyframe Move
フローティング・フロートカード
ゆったりとしたY軸の移動とわずかな回転を組み合わせた無段階の浮遊エフェクト。
Text
Infinite Loop
RAINBOW
流動カラーテキスト
`background-clip: text` を応用し、テキスト背景のグラデーション位置を永久にシフトさせます。
Card 3D
Interaction
Hover Me
REVEALED!
3D フリップカード
`perspective` と `transform-style: preserve-3d` を用いた裏表のある3Dカード反転アニメーション。
Loader
Loading UI
二重軌道ローディングスピナー
内側と外側の円リングが逆方向に異なるスピードで回転する宇宙的ローダー。
Card Effect
Glow
NEON FRAME
パルスネオンフレーム
`box-shadow` の内側・外側のぼかしを交互に伸縮させてサイバーパンク風に点滅させます。
Text
Glitch
GLITCH
デジタルグリッチエフェクト
CSSの `clip: rect` をランダムに動かし、色のズレとノイズのようなノスタルジックな表示を再現。
Effect
Pulse
波紋レーダーエフェクト
中心点から広がる拡大＋透明度アニメーションで波紋の伝播を表現します。