catダンジョンの先で見つけた宝箱(ティッシュ)意味不明な無料素材集めが楽しいです。最近はこのサイトのリニューアルに向けて、デザイン頑張ってます。デザインって難しいけど楽しいですね、ちろっと中身を言うとリニューアルの目的はこのブログの直帰率を下げることロゴを変えたのでそのついでなので、こうすればもっと記事を読んでくれるんじゃ、、、?とか考えてます。その前に記事のクオリティを上げないといけないんですが、、、さて、今回は以前紹介した、「カスタマイズが簡単なハンバーガーメニュー」を実際にいじってみようと思います。CodePen.こんな感じになっています。簡単ですね、もう少し説明を!という方は以前の記事を読んでいただけると幸いです。今回はこの中でCSSをいじってすこしだけ動きを変えてみようと思います。)の動き方を変更してみましょう。今回紹介する基本の動きを1つできるとあとは個人の想像と自由でなんとかなると思います!動かす部分はこちらの部分です。()の中に動く角度がはいります。rotate();下のサンプルでは、値を大きくしてくるっと回転するようになりました。いじってみてください。慣れてくると、一緒にかかれている「translateY」の部分もいじってみると動いた後の場所が変わるはずです。簡単に矢印の形で止まるようにもできます。枠をつけてみるこちらは擬似要素を使ってすこし可愛い動きをつけてみましょう。cssのkeyframeアニメーションを使っていきます。難易度は上がりますが、jsをいじるより簡単です。擬似要素で円形を作り、それを1/4ごとに透過させて動いているように見せています。CodePen.keyframeの詳しい説明に関しては長くなるのでまた別の機会にしたいと思います。jsが書けなくても簡単にアニメーションができるのはとっても嬉しいですね。まとめいかがでしたでしょうか?ハンバーガーメニューを学ぶ事で、CSSアニメーションを学ぶ事ができるなと個人的には感じています。今度いろいろなパターンを作ってギャラリーのようにしておこうと思いますのでしばしお待ちを。この記事を読んだ方がWebサイトに訪れるユーザーを、ちょっとしたCSSアニメーションで笑顔にできるようになれば幸いです。URLをコピーしました!URLをコピーしました!コメットキャットアニメとラノベとゲームが大好き。趣味で小説家になろうやアニメ、ガジェットについて、のんびりと個人ブログを運営中。Catブログは適格販売により収入を得ています。