HTML怎么做汉堡动画_HTML CSS汉堡菜单变形动画【整理】-html教程-PHP中文网

纯css实现hamburger→×动画的关键是用伪元素构建三线结构并协同transform：中间线opacity:0，上下线分别rotate(45deg)/rotate(-45deg)加translate交汇成×；需统一用transform控制偏移以避免原点漂移，同时排查pointer-events和z-index导致的点击失效。

html怎么做汉堡动画_html css汉堡菜单变形动画【整理】

怎么用纯 CSS 实现 hamburger → × 的过渡动画

关键不是“画三个横线”，而是让三根线条在 transform 和 position 上协同变化。浏览器原生不支持“线条自动弯折”，得靠伪元素 + 精确的 transform 组合来模拟形变效果。

推荐用 .hamburger 容器包住一个 <span></span>，再用 ::before 和 ::after 生成上下两条线，中间线用 <span></span> 本体——这样三线结构可控，动画时能独立设置 transform：

.hamburger {
  width: 24px;
  height: 18px;
  position: relative;
}
.hamburger span {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
  transform: translateY(-50%);
}
.hamburger span::before,
.hamburger span::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.hamburger span::before {
  top: -6px;
}
.hamburger span::after {
  bottom: -6px;
}

点击切换时，只需给 .hamburger.active 添加样式：中间线 opacity: 0，上线下线分别旋转并平移交汇成 ×：

.hamburger.active span {
  opacity: 0;
}
.hamburger.active span::before {
  transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.active span::after {
  transform: rotate(-45deg) translate(4px, -4px);
}

为什么 transform: rotate() 后线条位置会偏移

CSS 的 rotate() 默认绕元素中心点（transform-origin: 50% 50%）旋转，但上下两条线的初始位置是相对于 span 顶部/底部的，旋转后视觉中心会漂移——看起来像“甩出去”了。

解决办法只有两个：

显式重设 transform-origin，比如 transform-origin: 0 0（左上角），再配合 translate() 微调交汇点
放弃用 top/bottom 定位，统一用 top: 0 + transform: translateY() 控制初始偏移，这样旋转原点和位移逻辑更一致

后者更推荐，因为所有变换都集中在 transform 单一属性里，避免 top 和 transform 混用导致的渲染优先级冲突。