纯CSS汉堡按钮失效的主因是DOM结构松动、transform-origin偏差或iOS点击失灵；需确保label包裹input、~选择器严格同级、每条横线独立设置transform-origin，并为label添加cursor:pointer和最小宽高。
点击后图标不切换，checkbox 状态没联动
纯 CSS 实现汉堡按钮的核心是靠 input[type="checkbox"] 的勾选状态驱动伪元素变化。常见错误是把 label 和 input 剥离了——比如放在不同容器、没用 for 属性、或 input 被 display: none 后又被意外移出文档流。
-
input必须和label在同一表单上下文内，推荐用label包裹input，避免for/id配对失误 - 不要给
input加visibility: hidden或opacity: 0，它必须能正常接收点击；用position: absolute; clip: rect(0 0 0 0);更稳妥 - 检查浏览器开发者工具里
:checked状态是否真被触发：点击后在 Elements 面板看input是否多了checked属性
:checked ~ .menu-icon 选择器失效，动画不动
CSS 相邻/兄弟选择器对 DOM 结构极其敏感。如果菜单图标（如三横线）不是紧跟在 input 后面的同级元素，或者中间插了其他标签（哪怕是个空 span），~ 就完全不生效。
- 确保结构严格为：
input→（紧邻）→label或div.menu-icon，且两者同级 - 若图标在
label内部，就别用~，改用input:checked + label .bar这类组合 - 动画依赖
transform和opacity，务必确认目标元素没被overflow: hidden截断，也没被父级transform影响层叠上下文
移动端点击无响应，iOS Safari 下失灵
iOS Safari 对未设置 cursor: pointer 或缺少 touch-action 的非可点击元素有延迟/屏蔽行为，尤其当 label 里只有伪元素（::before/::after）时更明显。
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent - 确保
label有明确宽高（哪怕只是min-width: 44px; min-height: 44px），避免 iOS 认为“点不到” - 如果用了
transform: scale(0)隐藏原始 checkbox，别让它影响点击热区；优先用clip-path或position移出视口
三根横线旋转错位，transform-origin 没对齐
每条横线（通常用 ::before、::after 和自身）需要独立控制旋转中心。默认 transform-origin: 50% 50% 会让它们绕各自盒模型中心转，但视觉上要的是绕中点水平翻转或绕左端点旋转，错一点就显得“拧巴”。
立即学习“前端免费学习笔记（深入）”；
- 第一根（顶部）常设
transform-origin: left top，第二根（中间）用left center，第三根（底部）用left bottom - 如果用
top: 0/top: 50%/top: 100%定位横线，注意百分比基于父容器高度，而transform-origin的百分比是基于元素自身尺寸 - 调试时临时加
outline: 1px solid red到每条线，能直观看到旋转轴位置
transform-origin 差一个值、或者 iOS 把你当空气——这些地方得亲手点开 DevTools 一条线一条线地核对。 
