更改汉堡图标

Question

我正在尝试将汉堡包图标更改为X。我要创建的是将顶行和底行转到中间，然后转到X。这是到目前为止的代码：

$(document).ready(function() {
  $(".icon").click(function() {
    $(".icon").toggleClass("active");
  });
});

body {
  margin: 0;
  padding: 0;
  background: #ff5c40;
}

.icon {
  position: absolute;
  top: 50%;
  Left: 50%;
  transform: transition(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 16px;
}

.hamburger:before {
  top: -16px;
}

.icon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
   top: 0px;
     -webkit-transform: rotate(-135deg) ;
     transform:  rotate(-135deg);
     -webkit-transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
}



.icon.active .hamburger:after {
  top: 0px;
      -webkit-transform: rotate(-45deg) ;
      transform: rotate(-45deg);
      transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
      transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
      transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon">
  <div class="hamburger">
  </div>
</div>

如果有人能帮助我，我非常感谢。由于我已经坚持了这么长时间，所以现在已经三到四天了。而且我不知道该怎么办！

Answer 1

如何将另一条线旋转-45度？

编辑：根据您的请求通过注释进行更新。现在，这将使用关键帧。我们说在总时间的0％处不执行任何操作，然后在总时间的50％处（共2秒的1秒）将顶部和底部排在中间。  然后以总时间的100％（在2秒时）旋转线条以制作X。您也可以研究链接动画，但是我发现它有点不可靠。该解决方案将完成您的工作并将其分解为您想要发生的事情。forwards将保留动画的最后一帧，为您提供X的外观，而不是一遍又一遍地重复动画。

$(document).ready(function() {
  $(".icon").click(function() {
    $(".icon").toggleClass("active");
  });
});

body {
  margin: 0;
  padding: 0;
  background: #ff5c40;
}

.icon {
  position: absolute;
  top: 50%;
  Left: 50%;
  transform: transition(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 16px;
}

.hamburger:before {
  top: -16px;
}

.icon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
  animation: makeXLeft 2s forwards;
}

.icon.active .hamburger:after {
    animation: makeXRight 2s forwards;
}

/* Standard syntax */
@keyframes makeXLeft {
  0% {}
  50% {top: 0px;transform: rotate(0deg);}
  100% {top: 0px;transform: rotate(45deg);}
}

/* Standard syntax */
@keyframes makeXRight {
  0% {}
  50% {top: 0px;transform: rotate(0deg);}
  100% {top: 0px;transform: rotate(-45deg);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon">
  <div class="hamburger">
  </div>
</div>