如何使用CSS绘制一个汉堡式菜单

使用 CSS 绘制汉堡式菜单图标，通常用三个水平线表示，可以通过以下几种方法实现：

1. 使用三个 <div> 元素:

这是最直观的方法，使用三个 div 分别代表三条横线，然后通过 CSS 设置它们的样式。

<div class="hamburger-menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

.hamburger-menu {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer; /* 添加鼠标指针样式 */
}

.bar {
  width: 100%;
  height: 3px;
  background-color: black; /* 设置颜色 */
  border-radius: 2px; /* 可选：添加圆角 */
  transition: transform 0.3s ease-in-out; /* 添加动画效果 */
}

2. 使用伪元素 ::before 和 ::after:

这种方法更简洁，只需一个 div 元素，利用 ::before 和 ::after 伪元素创建另外两条线。

<div class="hamburger-menu"></div>

.hamburger-menu {
  width: 30px;
  height: 3px;
  background-color: black;
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu::before,
.hamburger-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: black;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu::before {
  top: -8px;
}

.hamburger-menu::after {
  bottom: -8px;
}

3. 使用 SVG:

使用 SVG 可以创建更灵活、更易于缩放的图标。

<svg width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="30" height="3" fill="black"/>
  <rect y="7" width="30" height="3" fill="black"/>
  <rect y="14" width="30" height="3" fill="black"/>
</svg>

添加交互动画 (例如，点击变换成 "X")：

以上代码片段都包含了 transition 属性，方便添加动画。 你需要在 JavaScript 或 CSS 中添加点击事件处理程序，并修改 CSS 类或样式来实现动画效果。 例如，可以使用一个类来表示激活状态，并修改 transform: rotate(45deg) 等属性来实现 "X" 形状。

选择哪种方法取决于你的具体需求和项目。 伪元素方法通常更简洁，而 SVG 方法更灵活，尤其是在需要缩放或更复杂的动画时。 使用三个 div 的方法最直观易懂，方便初学者理解。 记得根据你的设计调整颜色、大小和间距。