汉堡变叉动画需用transform-origin精准定位旋转原点：::before绕left top转45deg，::after绕left bottom转-45deg，中杠opacity:0；位移必用transform替代top/left以避免重排，伪元素显隐用opacity+visibility而非display。
怎么让 hamburger 图标用 ::before 和 ::after 动画翻转
纯 CSS 实现汉堡变叉，关键不是“加动画”，而是控制伪元素的定位基准和变换原点。很多人直接给 ::before 加 rotate(45deg)，结果图标歪了或错位——因为没重设 transform-origin，默认从中心转，而横杠实际需要绕左端点旋转。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把三根杠都用
position: absolute叠在同一个div里，父容器设position: relative - 每根杠统一宽高（如
width: 24px; height: 2px;），背景色用background-color，别用 border -
::before向上平移-6px，::after向下平移6px，中间那根用自身元素（不靠伪元素） - 动画时：上面那根绕左上角转
45deg（transform-origin: left top），下面那根绕左下角转-45deg（transform-origin: left bottom），中间那根opacity: 0
为什么 transition 对 ::before/::after 的 content 或 display 无效
因为 content 和 display: none/block 都是非可过渡属性（non-animated properties）。浏览器根本不监听它们的变化，所以写 transition: content 0.3s 完全没反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想“隐藏/显示”伪元素，改用
opacity: 0/1+visibility: hidden/visible组合，两者都可过渡 - 避免用
display切换状态；如果必须控制显隐，用opacity配合pointer-events: none防点击穿透 - 所有动画依赖的属性，必须是 CSS 规范里明确列出的可过渡属性，比如
transform、opacity、background-color，但不包括height（除非是已知高度的元素）
移动端点击无响应？检查 touch-action 和 z-index 层级
汉堡菜单常被盖在轮播图、固定头部或第三方 SDK 组件下面，尤其 iOS Safari 对 z-index 解析更严格，伪元素默认渲染层级低，点不动不是 JS 没绑，是根本没触发 click。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给汉堡按钮容器加
position: relative和足够高的z-index（比如z-index: 1000） - 在按钮上加
touch-action: manipulation，避免 iOS Safari 延迟 300ms 点击判断 - 用
cursor: pointer辅助验证是否可点击（PC 端可见，移动端不影响但能帮调试） - 真机测试时，打开 Safari 开发者工具 → “Elements” 面板，长按检查伪元素是否真被渲染出来（有些机型会忽略空
content: ""的伪元素）
用 transform 替代 top/left 做位移的真正原因
很多人用 top: -6px 移动伪元素，再配 transition: top 0.3s，看起来也动了——但这是“布局重排”，性能差，尤其低端安卓机掉帧明显。而 transform: translateY(-6px) 是合成层操作，走 GPU，流畅得多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有位移、缩放、旋转，一律用
transform，别碰top、left、margin等触发布局的属性 - 给汉堡按钮容器加
will-change: transform（仅在动画频繁时加，别滥用） - 动画结束后的最终态，仍要保留
transform值（比如叉形状态写死transform: rotate(45deg)），否则 Safari 可能回退到初始位置
最易被忽略的是伪元素的 transform-origin 必须和视觉旋转轴对齐，不是“看起来像就行”。差 2px 原点偏移，动画就会滑动+旋转混在一起，用户一眼就感觉“卡”或者“不对劲”。
