使用 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 的方法最直观易懂，方便初学者理解。 记得根据你的设计调整颜色、大小和间距。
