こんにちは！ CSS を使って、アイコンを生き物のように反応させるエフェクトをご紹介！
モバイル・タブレットだったら、タップするとキュートに反応しますよ。😀
アニメーションの変化は自然な動きに
CSS transform を利用して動きを出しているだけなので、変化をつける方法は数多く公開されているコードで試して見てください。ディズニー社のアニメーション基本原則をヒントに作るといいですね。
See the Pen vYGzGye by bens-user (@ben1099user) on CodePen.
💻📲 ben1099url.starfree.jp/0035.html ( DEMO )
応用してみる
こういった動きをさせると親しみやすくなるので、ホームページ内が愉快で明るくなりますね。
今回はアイコンに動きをつけましたが、ボタンなどに動きをつけなど、ウエブ上で紹介されているものも数多くあります。
何かクリック又はホバーさせたい所にアニメーションをつける事で人から親しみやすいホームページになるので、色々と活用してみて下さいね。☕
コメント