CSS

【CSS】ハンバーガーアイコンアニメーションAnimated hamburger icons

December 4, 2016
Animated hamburger icons

Animated hamburger iconsはハンバーガーアイコンアニメーション

CSS

<link rel="stylesheet" href="css/main.css" rel="stylesheet" type="text/css">

HTML

<div class="icon icon1">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

JS

<script type="text/javascript">- function() {
  var $icons = document.getElementsByClassName('icon'),
      i;

  for(i = 0; i < $icons.length; i++) {
    - function(current) {
      var $icon = $icons[current];

      $icon.addEventListener('click', function() {
        $icon.classList.toggle('animate');
      });
    }(i);
  }
}();
</script>

MIT