纯css实现汉堡按钮的核心是用input[type="checkbox"]:checked作为状态开关，配合label触发、伪元素绘线、transform形变及相邻选择器控制菜单显隐。
纯 CSS 实现汉堡按钮，关键不在“画三根线”，而在于用 :checked 控制状态、用伪元素精准叠加、用 transform 做可预测的形变。JavaScript 不是必需项，但必须理解表单控件如何成为 CSS 的“开关”。
用 input[type="checkbox"] + :checked 触发菜单显隐
移动端没有 hover，也不能监听 click，唯一能被 CSS 感知的交互状态就是表单控件的选中态。隐藏复选框，用 label 关联它，点击 label 就等效于 toggle input 的 checked 状态。
-
input#nav-toggle必须放在label之前，且label[for="nav-toggle"]才能正确触发 - 不能用
div或span模拟 checkbox——CSS 无法读取它的“状态” - 菜单容器（如
.nav-menu）需用相邻选择器（~）或兄弟选择器（+）响应:checked，例如：#nav-toggle:checked ~ .nav-menu { display: flex; } - 避免用
display: none → block做过渡：它不支持动画。改用max-height、opacity或transform: scaleY()
用 ::before 和 ::after 画三道杠，并确保旋转锚点一致
三道横线不是靠三个 div 拼的，而是靠一个 .hamburger 元素本体 + 两个伪元素，三者绝对定位叠在一起。每根线都要独立控制 transform，但必须统一以中心为原点旋转，否则在 Safari/iOS 上会偏移。
- 三个元素（本体、
::before、::after）都必须声明content: ""，否则伪元素不渲染 - 三者
width、height、background-color、top值要完全一致，否则视觉错位 - 每个都要加
transform-origin: center，只写在.hamburger上不够 - 动画应只作用于
transform和opacity，避免transition: all导致未声明属性意外参与过渡
切换类名比依赖 :checked 更灵活，但要注意触发时机
有些场景下，比如需要配合 JS 做更复杂的逻辑（如滚动后自动收起菜单），直接操作 class 更可控。此时仍可沿用同一套 CSS 动画规则，只需把选择器从 #nav-toggle:checked ~ .hamburger 改成 .hamburger.is-active。
- JS 中用
element.classList.toggle("is-active")，别用className = "is-active"，否则会覆盖其他 class - 移动端点击无响应？检查是否漏了
cursor: pointer和touch-action: manipulation - 如果汉堡图标是空
div，iOS Safari 可能忽略点击区域，建议加width/height和aria-label - 不要在
:hover上做主切换逻辑——它在触摸设备上不可靠，仅作桌面端增强即可
最易被忽略的是 transform-origin 的作用范围和媒体查询断点的粒度。很多人写了 transform-origin: center 却只加在父容器上，结果伪元素仍以左上角旋转；还有人用 @media (max-width: 768px)，却没意识到 768px 在 iPad Pro 横屏下也命中，导致桌面端意外触发汉堡菜单。断点值得结合真实设备数据反复验证，而不是照搬“常见值”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
