汉堡按钮变形
汉堡按钮变形：点 ☰ 时按钮自己变成 ✕（或箭头），是抽屉菜单的黄金搭档。纯 CSS 实现：三条横线用伪元素或独立 span，点击加类后中间一条淡出、上下两条旋转交叉就成 ✕。
过渡给 transform 和 opacity 即可；按钮状态要与菜单状态同步（同一事件里 toggle 类），避免“按钮变了菜单没开”。
- 三条线：1 个元素 + ::before/::after（上下两条）
- .active 时中间线 opacity:0，上下两条 rotate ±45deg
- 点击与菜单开关联动，别让两者状态分家
HTML
<style> #burger { position: relative; width: 56px; height: 46px; border: 1px solid #eee; border-radius: 10px; background: #fff; cursor: pointer; margin: 20px auto; display: block; } #burger span, #burger::before, #burger::after { content: ""; position: absolute; left: 12px; width: 30px; height: 3px; border-radius: 3px; background: #333; transition: transform .3s ease, opacity .3s ease; } #burger span { top: 21px; } #burger::before { top: 11px; } #burger::after { top: 31px; } #burger.active span { opacity: 0; } #burger.active::before { transform: translateY(10px) rotate(45deg); } #burger.active::after { transform: translateY(-10px) rotate(-45deg); } </style> <button id="burger"><span></span></button> <script> document.getElementById('burger').addEventListener('click', function () { this.classList.toggle('active'); }); </script>
本节要点汉堡变形 = 三线伪元素 + 上下旋转交叉/中淡出；状态与菜单同步。
