• HTML
• CSS
• JS

HTML

<div class="menu-bar">
    <div class="mb-line-1"></div>
    <div class="mb-line-2"></div>
    <div class="mb-line-3"></div>
</div>

CSS

body{
    background:#45b39d;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:0;
}
.menu-bar{
    width:1.8em;
    cursor:pointer;
    padding:1em;
    background:#17202a;
    border-radius:0.5em;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}
.mb-line-1,.mb-line-2,.mb-line-3{
    width:100%;
    height:0.2em;
    background:white;
    border-radius:3px;
    transition:all 0.5s;
}
.mb-line-2{
    padding:0rem;
    margin:0.4em 0em;
}

/* animación */

.show .mb-line-1{
    width:0.7em;
    transform:rotate(-45deg) translate(-4px,4px);
}
.show .mb-line-2{
   width:1.6em;
}

.show .mb-line-3{
    width:0.7em;
    transform:rotate(45deg) translate(-4px,-4px);
}

JS

const elem = document.querySelector('.menu-bar');

elem.onclick = function(){
    elem.classList.toggle('show');
}