こんにちは、デザイナーAkiです。
CSSで作成したボタンにカーソルをマウスオーバーした際、「色が変わる」、「大きさが変わる」など、様々な効果を付けられるホバーアニメーションは、webサイト上で様々なことを表現できるし、今ではたくさんのサイトで実装されています。
デザインやコーディングをする際、どんなアニメーションにするか迷ってしまう、、、
そんなアナタに少しでもお役に立てればいいなと思います！
ボタン
404 File Not Found
web-bruno.com
私が参考にしているサイトの中で、アニメーションの種類が一番多く、現在流行っているアニメーションがほぼ網羅されている気がします。
もちろんhtml/cssコードがあるので、コピペで実装出来ます！
ハンバーガーメニュー
https://www.nxworld.net/10-css-hamburger-menu-icon-design-and-effect.html
www.nxworld.net
「ハンバーガーメニュー」のホバーや、「ハンバーガーメニュー」→「閉じるボタン」に変化するアニメーションなど、色々な種類があるので、是非試してみてください。
写真・画像
https://www.nxworld.net/css-image-hover-effects.html
www.nxworld.net
写真のホバーだけではなく、フィルターを掛けるタイプもあります！
さいごに
いかかでしょうか？
色々なホバーアニメーションがあるので、ぜひ色々試してみましょう！
ではまた次回！
