<style media="screen">
      .box span{
        width: 18px;
        height: 2px;
        margin: 4px 3px 0;
        background: #000;
        display: block;
        transition: all .6s;
        -webkit-transition:all .6s;
        transform-origin:0 50%;
        -webkit-transform-origin:0 50%;
      }
      .box .first-span{
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -o-transform:rotate(45deg); /* Opera */
      }
      .box .second-span{
        opacity: 0;
      }
      .box .third-span{
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg); /* IE 9 */
        -moz-transform:rotate(-45deg); /* Firefox */
        -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
        -o-transform:rotate(-45deg); /* Opera */
      }
    </style>
      <div class="box">
        <span id="first-span"></span>
        <span id="second-span"></span>
        <span id="third-span"></span>
      </div>
      <script>
      var oBox = document.getElementsByClassName('box')[0],
          firstSpan = document.getElementById('first-span'),
          secondSpan = document.getElementById('second-span'),
          thirdSpan = document.getElementById('third-span')
        oBox.onclick = function(){
          if(firstSpan.className != ''){
            firstSpan.classList.remove('first-span')
          }
          else {
            firstSpan.classList.add('first-span')
          }
          if(secondSpan.className != ''){
            secondSpan.classList.remove('second-span')
          }
          else {
            secondSpan.classList.add('second-span')
          }
          if(thirdSpan.className != ''){
            thirdSpan.classList.remove('third-span')
          }
          else {
            thirdSpan.classList.add('third-span')
          }
        }
      </script>