纯CSS汉堡图标用一个按钮加::before和::after生成三横线：主元素为中线，伪元素为上下线，通过position:absolute叠合，统一设宽高、背景色及transform动画实现三线转叉号。
汉堡图标怎么用 ::before 和 ::after 生成三横线
三横线本质是三个独立的块级元素，但你不需要写三个 <span></span>。用一个 <button class="hamburger"></button>，配合 ::before 和 ::after 就能凑齐三根——主元素本身是一横，伪元素各撑一根。
关键点在于统一控制尺寸、背景色和定位：
-
position: relative必须加在父元素上，否则伪元素的top/left会相对于 body 定位 - 三根线默认垂直居中对齐，推荐用
top: 50%; transform: translateY(-50%)而不是top: 2px这类魔法数字 - 每根线高度设为
2px，宽度设为24px（适配小屏），背景色用currentColor方便继承文字色
点击后如何让三横变成叉号：关键在 transform 组合
动画不是靠“替换 DOM”，而是靠改变三根线的位置和旋转角度。叉号由两根斜线组成，所以需要：
- 顶部线：
rotate(45deg)+translateY(6px) - 中间线：完全隐藏（
opacity: 0） - 底部线：
rotate(-45deg)+translateY(-6px)
注意：所有 transform 必须写在同一行，用空格分隔，比如 transform: rotate(45deg) translateY(6px)；如果写成两行，后写的会覆盖前写的。
立即学习“前端免费学习笔记（深入）”；
为什么加了 transition 动画还是卡顿或不触发
常见原因不是代码写错，而是过渡属性没锁准：
- 只写
transition: all 0.3s很危险——浏览器要重绘所有可变属性，容易掉帧 - 应精确指定：
transition: transform 0.3s ease, opacity 0.3s ease - 必须给三根线都加
transition，包括伪元素；漏掉.hamburger::after的声明就会导致它突变 - 移动端记得加
will-change: transform（仅对频繁动画的元素），但别滥用，否则可能引发渲染层爆炸
如何用 :checked + <input type="checkbox"> 替代 JS 控制状态
纯 CSS 实现开关，比监听 click 事件更轻量，也避免 JS 加载失败导致菜单失灵：
- 把
<input id="menu-toggle" type="checkbox">放在<label for="menu-toggle"></label>前面 - 用
.hamburger { background: none; border: none; }清掉默认样式，再用伪元素画图 - 状态切换靠
#menu-toggle:checked ~ .hamburger::before这类兄弟选择器驱动样式变化 - 注意：CSS 无法监听“点击以外”的关闭动作（如 Esc 或点击遮罩层），这种场景仍需 JS 补充
最易被忽略的是层级和可访问性——<input> 不能 display: none，得用 position: absolute; clip: rect(0 0 0 0); 隐藏同时保留语义。
