径向展开效果不能只靠transform: scale()，因其默认以元素中心为原点缩放，导致菜单从屏幕中央炸开而非从点击图标位置生长；需结合position: absolute锚定、JS动态获取图标坐标并设置transform-origin、叠加opacity与visibility控制显隐节奏，才能实现精准“长出”效果。
径向展开效果为什么不能只靠 transform: scale()
因为纯 scale() 会以元素中心为原点放大，菜单项会从屏幕中央炸开，而不是从汉堡图标位置“生长”出来。用户点击的是右上角图标，但菜单却从页面正中弹出——视觉断裂，体验失焦。
真正可用的解法是：用 position: absolute 把菜单容器锚定在汉堡图标坐标，再配合 transform-origin 动态设原点。但注意：CSS 无法读取点击坐标，所以必须提前把菜单 DOM 放到和图标同一父容器内，且用 JS 获取图标位置后写入 style。
- 必须将
#nav-list和#check（或触发按钮）放在同一个父级下，否则getBoundingClientRect()拿到的是相对视口坐标，后续定位会偏移 -
transform-origin值不能写死，得用 JS 动态注入，例如：element.style.transformOrigin = `${x}px ${y}px` - 别用
scale(0)→scale(1)简单过渡——内容文字会糊，尤其小屏设备；应叠加opacity和visibility控制显隐节奏
如何让菜单从图标位置“长出来”，而不是平移飞入
关键不是动画类型，而是定位起点。很多实现用 top/right 固定值把菜单甩到角落，结果每次点击都从同一处展开，和点击位置无关——这不算径向，只是固定方向弹出。
实操步骤：
立即学习“前端免费学习笔记（深入）”；
- 给汉堡图标容器（比如
#hamcross）加position: relative，确保子元素能以其为定位基准 - 把
#nav-list移到#hamcross内部，紧贴其后（同级兄弟不行，必须是后代或同级但共享父容器） - JS 中监听点击后，立即执行：
const rect = hamcross.getBoundingClientRect(); menu.style.left = `${rect.right - window.scrollX}px`; menu.style.top = `${rect.top - window.scrollY}px` - CSS 里设
#nav-list { position: absolute; transform-origin: top right; transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.19, 0.98), opacity 0.2s; }
max-height 和 clip-path 哪个更适合径向展开
max-height 是伪径向：它只能做垂直方向的拉伸，配合 overflow: hidden 后，左右边缘仍是硬切，看起来像“撑开”而非“绽放”。clip-path 才是真解，但要注意兼容性。
- 推荐方案：
clip-path: circle(0 at top right)→circle(200vmax at top right)，其中200vmax确保覆盖全屏，避免内容被裁 - Firefox 对
clip-path的circle()支持良好，Chrome 也已稳定支持（≥ v115），但 iOS Safari ≤ 16.6 有渲染抖动，需加will-change: clip-path - 如果要兼容老 iOS，降级用
transform: scale()+opacity，并手动设transform-origin为top right，比默认 center 更贴近点击点
移动端点击后菜单不收起，纯 CSS 能否闭环
不能。CSS 的 :checked 或 :focus-within 在触屏设备上无可靠“失焦”信号，且多个菜单共存时，无法自动关闭前一个。这是 CSS 的能力边界，不是写法问题。
必须引入轻量 JS 来闭环：
- 监听
click全局事件，点击非菜单区域时移除is-open类 - 用
pointer-events: none+opacity: 0隐藏遮罩层，避免误触底层内容 - 收起动画要反向触发：先设
clip-path: circle(200vmax at top right)，再用setTimeout改为circle(0 at top right)，否则动画不执行
最易被忽略的是：clip-path 动画必须搭配 transition 写在元素本身，不能只写在类名切换里；且 Safari 需要 -webkit-clip-path 双写，否则动画失效。
