ハンバーガーメニューが矢印に変わる CSS アニメーションを真似してみた - Corredor

作りながら学ぶ HTML/CSSデザインの教科書 作者: 高橋朋代,森智佳子出版社/メーカー: SBクリエイティブ発売日: 2013/12/14メディア: 単行本この商品を含むブログ (11件) を見る 仕事で Backlog を使っている。Backlog のページには、左側のメニューを収納したり戻したりするための「ハンバーガーメニュー」アイコンがあり、これにマウスカーソルを乗せると矢印のアイコンにアニメーションで変化する。コレが面白かったので、実装を調べて、改良版を作ってみた。 See the Pen Hamburger Arrow by Neos21 (@Neos21) on CodePen. span.arrow の中に span.inner を置くのが基本。span.arrow にはホバー時に左右どちら向きの矢印にしたいかによって、span.arrow.left か span.ar