纯CSS实现汉堡菜单动画的核心是利用checkbox的:checked状态联动label及span元素，通过transform和opacity控制三线变叉，需确保input与label正确关联、transition精确声明且label热区足够大。
用 :checked 触发汉堡图标变形的底层逻辑
纯 CSS 实现汉堡菜单动画的关键，不是靠 JS 监听点击，而是把 隐藏后，用其 :checked 状态联动 和后续 元素。浏览器原生支持该伪类切换，无 JS 也能响应，且能被屏幕阅读器识别（可访问性比纯 display: none 的 JS 方案更好）。
必须确保： 和 关联（通过 id/for），且 是 的子元素或相邻兄弟——否则 :checked ~ span 或 :checked + label span 选择器会失效。
三根横线如何变成叉号：transform 组合必须写全
单靠 rotate(45deg) 不足以让三线变叉；常见错误是只转顶部/底部线，中间线没隐藏或错位。标准做法是：
-
用绝对定位堆叠，统一设width: 24px; height: 2px; background: #000; - 默认状态：三线垂直居中、间距均匀（用
top: 0、top: 50%、top: 100%或transform: translateY()控制） -
:checked下：- 顶部线：
transform: rotate(45deg) translate(5px, 5px); - 中间线：
opacity: 0;（不能只设display: none，否则动画中断） - 底部线：
transform: rotate(-45deg) translate(5px, -5px);
- 顶部线：
漏掉 translate 会导致旋转后线条中心偏移，看起来像“歪着叉”；不设 opacity: 0 而用 visibility: hidden 也会卡住过渡动画。
动画卡顿或不触发？检查 transition 和 pointer-events
所有要动的属性（transform、opacity、top）都得显式声明 transition，且父容器不能有 overflow: hidden 切掉动画路径。常见坑：
- 只写了
transition: all .3s—— 但all包含height、width等无关属性，拖慢渲染；应限定为transition: transform .3s ease, opacity .3s ease; -
被opacity: 0隐藏后，若没加pointer-events: none，可能在某些安卓 WebView 中误触失效 - 父
或will-change: transform反而引发闪烁，真需要优化时再加
移动端点击无响应？label 的点击热区必须够大
很多实现把 压缩到仅包裹图标，导致手指点不准。实际要：
- 给
设display: block; width: 44px; height: 44px;（满足 iOS 最小触控 44×44pt） - 用
padding扩展热区比用margin更可靠（margin不参与点击检测） - 避免在
上套再设点击事件——这会让:checked失效，因为原生关联断了真正难调的不是动画本身，是 label 和 input 的绑定关系稍有偏差，整个交互就静音了。多用浏览器开发者工具的“元素选择器”点一下 input，看是否高亮对应 label，比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
