CSS动画汉堡菜单无法形成正确X形的解决方法咨询

嘿，这个问题我之前做汉堡菜单的时候也踩过坑！你现在的核心问题就是transform-origin的设置没适配顶部和底部线条的旋转需求，导致两条旋转后的线条没法在中心交叉，出不来规整的X效果。咱们一步步来修正：

问题原因分析 #

你给所有span统一设置了transform-origin: 0 50%;（也就是每个线条的左中点），这对顶部线条（第一个span）顺时针转45度是合适的，但底部线条（第三个span）绕左中点逆时针转-45度时，它的右端会向下偏移，两条线的交点不在汉堡的中心，自然就不是正确的X形了。

解决方案 #

我们需要给顶部和底部线条分别设置对应的旋转原点：

• 顶部线条保持绕左中点旋转，顺时针转45度后右端会上移；
• 底部线条改为绕右中点旋转，逆时针转45度后左端会上移；
• 两者的交点就会落在汉堡的中心，完美形成标准X形。

另外，把中间线条的隐藏效果改成opacity: 0 + width: 0的组合，过渡会更顺滑自然。

修正后的完整代码 #

HTML（无需改动）

<div class="hamburger" onclick="handleNav()">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS（关键修改transform-origin）

.hamburger {
  width: 25px;
  cursor: pointer;
  /* 可选：添加相对定位，确保旋转原点相对容器稳定 */
  position: relative;
}
span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: black;
  margin-bottom: 4px;
  transition: all 0.3s ease; /* 用ease让动画更流畅自然 */
}
span:last-child {
  margin-bottom: 0;
}
.is-active span:first-child {
  transform-origin: 0 50%; /* 顶部线条绕左中点旋转 */
  transform: rotate(45deg);
}
.is-active span:nth-child(2) {
  opacity: 0; /* 先透明再缩窄，过渡更柔和 */
  width: 0;
}
.is-active span:last-child {
  transform-origin: 100% 50%; /* 底部线条绕右中点旋转 */
  transform: rotate(-45deg);
}

JavaScript（无需改动）

let active = false;
const handleNav = () => {
  const hamburger = document.querySelector(".hamburger");
  if (!active) {
    hamburger.classList.add("is-active");
  } else {
    hamburger.classList.remove("is-active");
  }
  active = !active;
}

额外小优化 #

如果想让X形的交叉点更精准，可以给.hamburger添加padding: 4px 0，让线条的上下空间更均匀，视觉效果会更舒服。

内容的提问来源于stack exchange，提问作者Tom