用三个 更稳妥。因伪元素在旧版 Safari 或安卓 WebView 中易错位卡顿，三独立 可分别控制 transform、兼容性好、调试直观。
汉堡图标用三个 <span></span> 还是单个 <div>？
<p>用三个 <code><span></span> 更稳妥。单个元素靠伪元素（::before / ::after）实现三线，容易在 Safari 旧版或某些安卓 WebView 中渲染错位或动画卡顿。三个独立 <span></span> 可分别控制 transform，兼容性好，调试直观。
结构示例：
<button class="hamburger"> <span></span> <span></span> <span></span> </button>
transform: rotate() 和 translateY() 怎么配比才不偏移？
关键在设置 transform-origin。每条横线默认以自身中心旋转，但 hamburger → X 动画需要绕左端点转，否则会“漂移”。统一设为 transform-origin: left center，再配合 rotate(45deg)、rotate(-45deg) 和 opacity: 0 实现收拢效果。
- 第一行：顺时针转 45°，同时
translateY(0.25em)往上微调对齐交叉点 - 第二行：设
opacity: 0消失（不能用display: none，否则无法参与过渡） - 第三行：逆时针转 −45°，同时
translateY(-0.25em)往下微调
点击后菜单展开，但图标动画没触发？检查这三点
纯 CSS 实现依赖状态切换，常见断点在这儿：
立即学习“前端免费学习笔记（深入）”；
- 没用
:checked+ 隐藏<input type="checkbox">控制状态——纯 CSS 必须靠这个“开关”，不能只靠:hover -
<input>和<button></button>不在同一个父容器下，导致相邻兄弟选择器（如input:checked ~ .hamburger）失效 - 忘了给所有
transform和opacity加transition，且三行的transition-delay要错开 0.05s 左右，否则像“啪”一下硬切
移动端点击区域太小，又不想放大图标本身怎么办？
用 padding 扩展可点击区，但必须配合 box-sizing: border-box，否则 padding 会让整体变大撑乱布局。更推荐加 min-width 和 min-height，并用 aspect-ratio: 1 锁定正方形比例，避免横竖屏缩放变形。
例如：
.hamburger {
min-width: 44px;
min-height: 44px;
aspect-ratio: 1;
padding: 8px;
}
真正难的是让三线在不同屏幕密度下都保持清晰锐利——别用 px 写宽高，改用 em 或 rem，并确保 line-height: 0 和 font-size: 0 清除内联元素默认基线间隙。
