.menu-icon {
  position: relative;
  width: 60px;
  height: 50px;
  background: rgb(0, 0, 0);
  padding: 10px;
  cursor: pointer;
}
.menu-icon input {
  display: none;
}
.menu-icon span {
  display: block;
  position: relative;
  height: 3px;
  width: 100%;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 1;
  left: 0;
  margin-bottom: 24%;
  transition: 0.3s ease-in-out;
}
.menu-icon span {
  transform-origin: left center;
}
.menu-icon input:checked ~ span {
  background: red;
  left: 5px;
  margin-bottom: 28%;
}
.menu-icon input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
}
.menu-icon input:checked ~ span:nth-of-type(2) {
  opacity: 0;
}
.menu-icon input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
}