【CSS3】無料で使えるマウスオーバーエフェクト8選

CSS3アニメーションで作る、アイデア満載のエフェクト8選

2015年9月22日

Contents

クリックした時やマウスをのせた時のアニメーションがかっこいいと、それだけでもサイトの印象がぐっと引き締まります。
今回は、秀逸なアイデアで気持ちの良い動きを実現するCSS3のエフェクトを集めました。

右側をクリックすれば左回転、下をクリックすれば下から上に回転。クリックする位置によってフリップの方向が変わります。クリック位置の判定のためにスクリプトを使用しています。

マウスオーバーでボタンの形が左右逆になり、小さなイラストが現れます。CSS3のおかげで、角丸を角ごとに指定できるので、こんな形も簡単に作れるようになりました。

画像を使った円形のボタンがアニメーションします。デモは全部で７種類あり、どれもおしゃれでインパクトがあります。

サイドメニューのアイコンにマウスをのせると、右側からサブメニューがスライドで現れます。

写真にマウスオーバーすると、タイトルと説明文がオーバーレイ表示されます。こちらも全部で10種類と豊富なバリエーションがあります。

アイコンを囲む円が様々なアニメーションで変化します。全部で９種。

右下の三角部分からボックス全体にオーバーレイで背景色が広がり、説明文などを表示させてくれます。

周りの円がぼんやりと光るようなエフェクトで、写真を際立たせます。

アイデア次第で使い方が広がるCSS3。
体験してみるだけでも、オリジナルのエフェクトを考える際のインスピレーションに繋がるのではないでしょうか。
今回紹介したコードはどれも無料でダウンロードできるので、ぜひ試してみてください。