秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
Post on:2012年9月11日
sponsors
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
Original Hover Effects with CSS3
デモページ
10種類のエフェクトで、見出しやテキストを気持ちいいアニメーションで表示します。
オーバーレイのかっこいい5種類のエフェクト。
Circle Hover Effects with CSS Transitions
デモページ
円形ならではの面白いアニメーションを使った7種類のエフェクト。
Fancy Hover Effects with CSS3 Transitions
デモページ
シンプルだけどファンシーなアニメーションのエフェクト。
背景画像をアニメーションでスライドし、背景とテキストのカラーを変更します。
パネルがフラッシュし、天地から画像とテキストがスライドします。
Sexy Image Hover Effects using CSS3
デモページ
画像をアニメーションで拡大し、マスクを除きます。
CSS :hover 'shine effect' (ver 3)
ボタンをホバーすると、きらっと光ります。
パネルをホバーすると、きらっと光ります。こちらは画像を使うタイプ。
5 Cool CSS Hover Effects You Can Copy and Paste
Demo 1, 2, 3, 4, 5
ふわっと浮かんだり、横にテキストがフェードインしたりなど、5つのホバーエフェクト。
ホバーの方向で変化するカラーが異なります。
CSS3 Spinning Social Media Icons
デモページ
アイコンをアニメーションでくるっと回転させます。
3D Thumbnail Hover Effects
デモページ
蛇腹のように折りたたんだり、雑誌のようにめくれます。
with jQuery
sponsors
