Hamburger Menu

汉堡菜单图标与侧边栏导航菜单的展开/收起动画，通过平滑过渡与内容滑动，使用户清晰感知界面变化。

经典变形

弹性旋转

箭头变形

完整侧边栏

/* 汉堡菜单变形动画 */
.ham-classic span {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.ham-classic.active span:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.ham-classic.active span:nth-child(2) {
  opacity: 0; transform: translateY(-50%) scale(0);
}
.ham-classic.active span:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* 侧边栏弹性滑出 */
.sidebar {
  left: -350px;
  transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sidebar.open { left: 0; }
      

← 返回索引