Question

我浏览了一些在线教程并获得了汉堡包菜单。但是，从3条到X的动画后，X图标不对称。

之前：https://gyazo.com/351864d80fda15dfa2745ca1d1daa433
之后：https://gyazo.com/7122592ea36e3f36d37d0779f4687a61

在后图像中，我们看到右侧较小，角度的左侧创建。两个跨距或直线具有相同的旋转角度，并且在检查时具有相同的高度/宽度。它几乎看起来像旋转的中心轴是关闭的。如果中心轴稍微向左移动了2-3个像素，那就没问题了。但是，我不知道这是否可能。

这是HTML：

<div id="burger-menu-wrapper">
    <a id="nav-toggle" class="js-menu-click" href="#">
        <div class="hamburger-menu">
            <span></span>
        </div>
        <h5>MENU</h5>
    </a>
</div>

这是CSS：

#nav-toggle .hamburger-menu{
  height:46px;
  position:relative;
  top:23px;
}
#nav-toggle .hamburger-menu span{
  margin:0 auto;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: #000000;
  position: relative;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -8px; 
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

修改：添加HTML

Answer 1

这有一个css属性：

transform-origin: X-axis Y-axis;

我只是对这些值进行了一些调整，以正确对齐轴，使X轴和Y轴正确对齐。

Answer 2

我实际上制作了一个类似于此的汉堡包，这些是我之前和之后的价值观。

.cross.active .span::before {
    top: 0px;
    transform: rotate(45deg);
}

.cross.active .span::after {
    top: 0;
    transform: rotate(-45deg);
}

.cross.active .span {
    background: none;
}

.cross.active .span :: before有top：0px;而不是顶部：0;

制作CSS动画移动汉堡菜单

2 个答案: