CSS如何实现响应式导航中的汉堡菜单动画_利用::before/::after形变-css教程-PHP中文网

核心是用.hamburger元素本身作中线，::before和::after生成上下线，三者通过absolute叠放；需设content: ""、position: relative父容器、统一宽高背景及transform-origin，用translateY()调间距、rotate()转叉号，并用opacity隐藏中线。

css如何实现响应式导航中的汉堡菜单动画_利用::before/::after形变

汉堡图标怎么用伪元素画出来

核心是用 .hamburger 元素本身作为中间横线，再用 ::before 和 ::after 生成上下两条线，三者通过 position: absolute 叠在一起。关键不是“画”，而是“能动”——所以必须统一设置 transition，且三条线的宽高、背景色、定位都要一致，否则形变会错位。

常见错误：::before 和 ::after 忘记设 content: ""（伪元素不渲染）、父容器没设 position: relative（导致绝对定位脱标）、三条线的 top 值没按等距计算（比如中间线在 50%，上下线就得分别在 25% 和 75%）。

实操建议：

.hamburger 设固定宽高（如 24px × 24px），background: currentColor，position: relative
::before 和 ::after 都设 content: ""、position: absolute、width: 100%、height: 100%、background: inherit
用 top: -8px 和 top: 8px（假设线高 2px，间距 8px）对齐，而非百分比——更可控

动画触发时如何让三线转成叉号

本质是旋转 + 位移：上线下移并顺时针转 45°，下线上移并逆时针转 45°，中间线隐藏或缩为 0。不能只靠 transform: rotate()，必须配合 transform-origin 控制旋转中心点，否则会偏移出框。

容易踩的坑：transform 写法顺序影响结果（如 translateY() rotate() 和 rotate() translateY() 效果不同）、没重置 transform-origin（默认是中心点，但上下线需设为各自中心）、中间线用 opacity: 0 而非 width: 0（后者会破坏布局流）。

实操建议：

激活态加类名 .hamburger.active，统一控制三线状态
上线：transform: translateY(6px) rotate(45deg)，transform-origin: left top
中线：opacity: 0 或 visibility: hidden（避免重排）
下线：transform: translateY(-6px) rotate(-45deg)，transform-origin: left bottom

为什么点击后菜单不展开？检查这些地方

伪元素动画只负责图标变形，菜单显隐是另一回事。很多人卡在这儿——以为图标动了，菜单就该出来，其实两者完全解耦。必须手动控制 nav 或 .menu 的 display 或 max-height，且要和图标动画同步。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型问题：display: none → block 无法过渡（CSS 不支持 display 动画）、max-height 从 0 到 auto 无效（auto 不能参与过渡）、JS 绑定事件用 onclick 写死在 HTML 里（不利于维护）。

实操建议：

菜单容器用 max-height + overflow: hidden，初始设 max-height: 0，展开时设一个足够大的值（如 500px）
JS 中用 classList.toggle("active") 同时切换图标和菜单类名
确保菜单和汉堡按钮在同一个响应式断点内生效（比如都写在 @media (max-width: 768px) 里）