二本線からバツ印へAppleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、高さを6%とした。サイズと位置は全て%で統一したので、コンテナーの幅と高さを指定すれば以下のCSSは変えることなくスケールする。 .sandwich::before, .sandwich::after { box-sizing: border-box; display: block; position: absolute; left: 25%; width: 50%; height: 6%; content
