<div class="burger">
  <span class="line first"></span>
  <span class="line half"></span>
  <span class="line third"></span>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #06beb6;  
  background: -webkit-linear-gradient(to top, #48b1bf, #06beb6); 
  background: linear-gradient(to top, #48b1bf, #06beb6); 
}

.burger{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:auto;
  width: 90px;
  height: 80px;
  cursor: pointer;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  transition: 250ms ease-out;
}

.burger .line {
  height:10px;
  width:100%;
  background:#fff;
  display:block;
  border-radius:5px;
  transition: 250ms ease-out;
}

.burger .line.half {
  width:50%;
}

.open.burger {

}

.open.burger .line.first {
  transform:rotate(45deg) translateX(5px);
  transform-origin: left;
  background:black;
}

.open.burger .line.third {
  transform:rotate(-45deg) translateX(5px);
  transform-origin: left;
  background:black;
}

.open.burger .line.half {
  opacity:0;
  width:0;
}

let menu = document.querySelector('.burger');

menu.addEventListener('click', function(){
  menu.classList.toggle('open');  
})