按教程实现Hamburger菜单：代码应显示叉号却生成右箭头问题

问题出在两个核心点：一是当前.is-active状态下的位移参数错误，导致旋转后的线条无法对齐形成叉号；二是缺少汉堡菜单的基础布局样式，这是实现正常交互的必要前提。

以下是修正后的完整代码：

完整CSS代码 #

/* 汉堡菜单基础样式 - 必须添加 */
.hamburger {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  position: relative;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  background-color: #333; /* 可替换为你的主题色 */
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 保留原hover效果 */
.hamburger:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: var(--primary);
}

/* 修正后的active状态 - 核心修改 */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

HTML代码（无需修改） #

<button class="hamburger is-active">
  <span></span>
  <span></span>
  <span></span>
</button>

关键修正说明： #

1. 补充基础样式：通过flex垂直排列三个span，设置统一的宽高、背景色，保证初始状态是标准的汉堡三条线布局。
2. 修正位移参数：把原代码中错误的translate(0px, -2px)和translate(-3px, 3px)替换为translateY(10px)和translateY(-10px)，让两条旋转后的线条在中间位置交叉，形成标准叉号。
3. 添加过渡动画：给span加上transition属性，让菜单切换的动画更流畅自然。

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