最近はスマホサイトだけでなく、PCサイトにも使われるようになったハンバーガーメニュー。
そんなハンバーガーメニューの動きのサンプルを紹介した「Tasty CSS-animated hamburgers」。
SPONSORED LINK
３本の線だけで多彩な動きが紹介されています。
気持ちのいい動きは、時にはリッチなアニメーションよりも、サイトの印象をよくします。
データもダウンロードできるので、CSSアニメーションの勉強にもなりますね。
いろいろな動きのハンバーガーメニュー「Tasty CSS-animated hamburgers」
投稿日：
執筆者：KIYOTA
関連記事
-
-
iPhoneのoverflowをスムーズにスクロールさせるCSS
iPhoneでoverflow: scroll;の時に、 -webkit-overflow-scrolling: touch; を追加すれば、滑らかに慣性スクロールできます。 [crayon-5c0f …
-
-
スタイルガイドは色々ありますが、初心者には設定が面倒だったり、バージョンアップされないために後から使えなくなったりと、困ることがあります。 スタイルガイドがない場合、他の人にコーディングを頼む時に、教 …
-
-
フラットデザイン向けのシンプルで美しいCSS3グラデーションジェネレーター
「Blend—Generate Simple and Beautiful CSS3 Gradients」は、 フラットデザインにあう色が限定に、 グラデーション用のCSSジェネレーターです。 Blen …
-
-
CSSのflexプロパティで右寄せ、左寄せ、中央寄せにする方法
CSSのflexプロパティを使うと、均等配置や順番の指定などができ便利ですが、 floatのように、右寄せ、左寄せにしたい場合もあります。
-
-
WordPressに自動でBootstrapのレスポンシブのテーブルのクラスを適用する
WordPressにBootstrapのレスポンシブのtableクラスである、table-responsiveを適用する方法です。 jQueryを使うことで、ソースを扱わずに済みます。 [crayon …
