SOURCE

<div class="menu-bar">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

<div class="test">
    <span></span>
    <span></span>
    <span></span>
</div>
<br />
<div class="test1">
    <span></span>
    <span></span>
    <span></span>
</div>
<style>
    *{
        margin:0;
        padding:0;
    }
    .test{
        box-sizing:border-box;
        position:relative;
        height:60px;
        width:60px;
        background-color:blue;
        line-height:60px;
        display:flex;
        align-items: center;
        justify-content:center;
        
    }
    .test span{
         display:block;
         position:absolute;
         width:90%;
         height:5px;
         background-color: white;
         transition:all 0.3s;
     }
     .test span:nth-child(2){
          transition:all 0s;
     }
      .test:hover span:nth-child(1){
          transform: rotate(45deg);
      }
      .test:hover span:nth-child(2){
          visibility:hidden;
      }
      .test:hover span:nth-child(3){
          transform: rotate(-45deg);
      }

   .test1{
        box-sizing:border-box;
        position:relative;
        height:60px;
        width:60px;
        background-color:blue;
        line-height:60px;
        display:flex;
        align-items: center;
        justify-content:center;
        
    }
    .test1 span{
         display:block;
         position:absolute;
         width:90%;
         height:5px;
         background-color: white;
         transition:all 0.3s;
         border-radius:8px;
     }
    .test1 span:nth-child(2){
          transition:none 0s;
     }
     .test1 span:nth-child(1){
         margin-top:-30px;
     }
    .test1 span:nth-child(3){
         margin-top:30px;
     }

     .test1:hover span:nth-child(1){
          transform: rotate(-8deg);
          margin-top:-24px ;
     }

     .test1:hover span:nth-child(3){
          transform: rotate(8deg);
          margin-top:24px;
     }

    .menu-bar{
        display:inline-block;
        background-color:blue;
        padding:10px;
    }
    .bar{
        display:block;
        width:45px;
        height:5px;
        background-color:white;
        border-radius:5px;
        transition:all 0.3s;
    }
     .bar:nth-child(2){
         margin:10px 0;
     }
    .menu-bar:hover .bar:nth-child(1){
        transform: rotate(-8deg);
    } 
    .menu-bar:hover .bar:nth-child(2){
       margin:9px 0;
    } 
    .menu-bar:hover .bar:nth-child(3){
        transform: rotate(8deg);
    } 
</style>

<script>
    var menuBar=document.querySelector(".menu-bar");
    var bar1=document.querySelector(".bar:nth-child(1)");
    var bar2=document.querySelector(".bar:nth-child(2)");
    var bar3=document.querySelector(".bar:nth-child(3)");
    menuBar.onclick=function(){
        bar2.style.visibility="hidden";
        bar3.style.transform="rotate(45deg)";
        bar3.style.marginBottom="12px";
        bar3.style.width="50px";
    }

    var test=document.querySelector(".test");
    var span1=document.querySelector(".test span:nth-child(1)");
    var span2=document.querySelector(".test span:nth-child(2)");
    var span3=document.querySelector(".test span:nth-child(3)");
    test.onclick=function(){
        bar2.style.visibility="hidden";
        bar3.style.transform="rotate(45deg)";
        bar3.style.marginBottom="12px";
        bar3.style.width="50px";
    }

    var test1=document.querySelector(".test1");
    var span1_1=document.querySelector(".test1 span:nth-child(1)");
    var span1_2=document.querySelector(".test1 span:nth-child(2)");
    var span1_3=document.querySelector(".test1 span:nth-child(3)");
    var test1Flag=true;
    test1.onclick=function(){
        if(test1Flag){
            span1_1.style.marginTop="0";
            span1_3.style.marginTop="0";
            span1_1.style.transform="rotate(-45deg)";
            span1_2.style.visibility="hidden";
            span1_3.style.transform="rotate(45deg)";
            test1Flag=false;
            return;
        }
        span1_1.style.marginTop="-30px";
        span1_3.style.marginTop="30px";
        span1_1.style.transform="rotate(-0deg)";
        span1_2.style.visibility="visible";
        span1_3.style.transform="rotate(0deg)";
        test1Flag=true;
    }
</script>