汉堡图标变形动画不动的根本原因是 transform-origin 未设为 center 或 transition 未写在默认样式中；需为每条线设置 transform-origin: center、在基础状态定义 transition、用 :nth-child 分别控制旋转位移，并添加 touch-action、will-change 等优化。
汉堡图标变形动画为什么不动？检查 transform-origin 和 transition 顺序
常见现象是点击后图标没变化，或者只动了一条线。根本原因是 transform-origin 没设对，或 transition 没写在基础状态（非 hover/active）里。三条横线默认以左上角为原点旋转，必须显式设成各自中心点。
- 每条
<span></span>需加transform-origin: center;，否则旋转会偏移 -
transition必须写在未激活的默认样式中，比如.hamburger span { transition: transform 0.3s ease, opacity 0.3s ease; } - 避免用
all做过渡属性，只过渡transform和opacity，防止重绘抖动
三条横线怎么分别旋转 + 位移？用 nth-child 和不同 transform 组合
标准三线变形（X 形 → 三条线 → 叉形）依赖每条线独立控制。不能只靠 class 切换整体状态，得用 :nth-child() 精确指定每条线的终点。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 第一行：从
transform: translateY(0) rotate(0);→translateY(8px) rotate(45deg) - 第二行：从
opacity: 1→opacity: 0（完全消失） - 第三行：从
transform: translateY(0) rotate(0);→translateY(-8px) rotate(-45deg) - 注意：所有
translateY值需与 line-height 或 margin 匹配，否则位移错位
移动端点击无响应？补全 touch-action 和 cursor 样式
真机上点不动，大概率是浏览器把点击事件当成了滑动。iOS Safari 和部分安卓 WebView 对 touch-action 很敏感，不声明就可能拦截 click。
- 给汉堡按钮容器加
touch-action: manipulation;，明确告诉浏览器“这是可点击控件” - 加
cursor: pointer;不仅是视觉提示，某些 Android 浏览器靠它触发 active 状态 - 确保父容器没设
pointer-events: none;或overflow: hidden;裁掉点击区域 - 别忘了用
@media (hover: none) and (pointer: coarse)单独优化触屏设备的 active 反馈
动画卡顿或闪跳？用 will-change 和 GPU 加速绕过渲染瓶颈
尤其在低端安卓机上，连续快速点击后动画撕裂、回弹延迟，本质是主线程忙于布局计算。强制图层提升能显著改善。
- 给三条线都加
will-change: transform;（仅动画元素，别滥用） - 用
transform: translateZ(0);或transform: scaleZ(1);触发 GPU 渲染层 - 避免在动画中同时修改
width/height/left等触发 layout 的属性 - 如果用了
filter: drop-shadow()，它会禁用 GPU 加速，换成box-shadow
click 后立刻加 class，得用 requestAnimationFrame 或 setTimeout(..., 0) 把 DOM 更新推到下一帧，否则浏览器来不及读取旧状态就应用新样式，变形直接跳变。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
