纯CSS实现hamburger→×动画的关键是用伪元素构建三线结构并协同transform：中间线opacity:0，上下线分别rotate(45deg)/rotate(-45deg)加translate交汇成×；需统一用transform控制偏移以避免原点漂移，同时排查pointer-events和z-index导致的点击失效。
怎么用纯 CSS 实现 hamburger → × 的过渡动画
关键不是“画三个横线”，而是让三根线条在 transform 和 position 上协同变化。浏览器原生不支持“线条自动弯折”，得靠伪元素 + 精确的 transform 组合来模拟形变效果。
推荐用 .hamburger 容器包住一个 <span>，再用 ::before 和 ::after 生成上下两条线，中间线用 <span> 本体——这样三线结构可控，动画时能独立设置 transform：
.hamburger {
width: 24px;
height: 18px;
position: relative;
}
.hamburger span {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #000;
transition: all 0.3s ease;
transform: translateY(-50%);
}
.hamburger span::before,
.hamburger span::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #000;
transition: all 0.3s ease;
}
.hamburger span::before {
top: -6px;
}
.hamburger span::after {
bottom: -6px;
}
点击切换时，只需给 .hamburger.active 添加样式：中间线 opacity: 0，上线下线分别旋转并平移交汇成 ×：
.hamburger.active span {
opacity: 0;
}
.hamburger.active span::before {
transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.active span::after {
transform: rotate(-45deg) translate(4px, -4px);
}
为什么 transform: rotate() 后线条位置会偏移
CSS 的 rotate() 默认绕元素中心点（transform-origin: 50% 50%）旋转，但上下两条线的初始位置是相对于 span 顶部/底部的，旋转后视觉中心会漂移——看起来像“甩出去”了。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 显式重设
transform-origin，比如transform-origin: 0 0（左上角），再配合translate()微调交汇点 - 放弃用
top/bottom定位，统一用top: 0+transform: translateY()控制初始偏移，这样旋转原点和位移逻辑更一致
后者更推荐，因为所有变换都集中在 transform 单一属性里，避免 top 和 transform 混用导致的渲染优先级冲突。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
移动端点击无反应？检查 pointer-events 和 z-index
常见现象：动画能看，但点击菜单没反应，click 事件根本没触发。
原因往往不是 JS 绑定问题，而是 CSS 层叠或交互拦截：
-
.hamburger被父容器的overflow: hidden截断，尤其在 fixed 导航里 - 相邻元素（如 logo 图片）设置了
pointer-events: none，但它的父级又没重置，导致穿透失效 -
z-index太低，被其他绝对定位元素盖住，特别是某些 UI 框架的 modal 背景层
快速验证方法：在 DevTools 里临时加 outline: 2px solid red 看实际可点击区域是否对齐；再检查 computed 样式中 pointer-events 是否为 auto，z-index 是否生效（非 auto）。
SVG 方案比 CSS 更稳，但要注意 viewBox 缩放
如果项目需要高保真、多尺寸适配或支持 IE11，用 SVG 替代 div + 伪元素更可靠。核心是把三条线写成 <line>，动画直接操作 x1/y1/x2/y2 或用 transform。
但容易忽略的是：<svg> 的 viewBox 必须与内部坐标系严格对应，否则 transform 会因缩放失真。例如设 viewBox="0 0 24 18"，那所有 <line> 的坐标就得按这个范围写，不能写死 px 值。
另外，SVG 内联样式里的 transition 不生效，必须用 CSS 选择器绑定到 <line> 元素上，且要加 !important 才能覆盖内联 style（除非你完全不用内联 style）。
真正麻烦的不是写法，而是当页面有 rem/em 缩放、CSS 变量动态改色、或需要响应式粗细时，SVG 的路径控制远不如 CSS 伪元素灵活——这时候反而得退回去调 border 和 scale()。
