纯CSS实现hamburger→×动画需用三根绝对定位span，顶部顺时针转45°并下移、中间opacity:0、底部逆时针转−45°并上移；须设transform-origin:center、transition-delay错开、transition明确声明transform和opacity，且checkbox结构需input:checked~span正确关联。
如何用纯 CSS 实现 hamburger → × 的旋转动画
能，而且不需要 JavaScript。关键不是“加动画”，而是让三根 <span></span> 在不同状态间精准控制旋转角度、位移和透明度，否则容易出现错位、跳帧或中间态残留。
核心思路：把三根 <span></span> 都设为绝对定位，统一用 transform: rotate() 和 transform: translateY() 控制形变，再配合 opacity 隐藏/显示中间那根。
- 顶部
<span></span>：顺时针转 45°，同时向下平移与中间条对齐 - 中间
<span></span>：设opacity: 0（不推荐直接display: none，会破坏过渡） - 底部
<span></span>：逆时针转 −45°，同时向上平移与中间条对齐
为什么必须用 transform-origin 和 transition-delay 配合
如果不设 transform-origin，旋转中心默认是元素中点，而三根 <span></span> 通常水平居中排列，会导致旋转后两端错开、叉号不闭合；transition-delay 则用于微调三根动画的起始时机，避免视觉上“一根先动、另两根滞后”的割裂感。
- 每根
<span></span>建议设transform-origin: center或更精确的transform-origin: 50% 50% - 顶部和底部
<span></span>可加transition-delay: 0.05s，让中间条先消失、再旋转，观感更自然 - 所有
transition必须写全：例如transition: transform 0.3s ease, opacity 0.3s ease，漏掉opacity会导致中间条闪一下
常见错误：hover 或 checkbox 切换时动画不触发或只动一半
本质是 CSS 选择器没正确关联到目标状态，或动画属性被覆盖。最常踩的坑是：用 :hover 时父容器未设 position: relative，导致子 <span></span> 的绝对定位偏移失效；用 <input type="checkbox"> 时，没用相邻兄弟选择器 ~ 正确捕获后续 <span></span> 元素。
立即学习“前端免费学习笔记（深入）”；
- 若用 checkbox，HTML 结构必须是：
<input type="checkbox"><span></span><span></span><span></span>，然后用input:checked ~ span控制样式 - 若用
:hover，确保父容器有明确宽高，且未设置overflow: hidden裁掉旋转后的超出部分 - 调试时可临时加
outline: 1px solid red查看每根<span></span>实际位置
移动端点击区域小、动画卡顿怎么办
小屏幕下 <span></span> 默认高度只有 2px，点击热区极窄；动画卡顿则多因强制重排（如改 top/left）或未启用硬件加速。
- 给每根
<span></span>加height: 2px和width: 24px，再用padding: 12px扩展点击区域（不影响视觉） - 动画属性只用
transform和opacity，避免触发布局计算 - 对菜单容器加
will-change: transform或transform: translateZ(0)激活 GPU 加速 - 真机测试时注意 Safari 对
transform: rotate()的 subpixel 渲染问题，可加backface-visibility: hidden缓解
叉号收口是否尖锐、三线交汇是否精准，取决于 transform-origin 和位移像素值的配合，差 1px 就可能看起来“没合上”。动手前先在 DevTools 里手动调 transform 值，确认理想形态再写进 CSS。
