汉堡图标 SVG - HTML

汉堡图标是现代网站设计中的重要元素之一，它是用来代表网站的主菜单的三条横线图标。这个简单的图标已经成为现代 UI / UX 设计的核心组件之一，因为它可以代表强大、简单和可靠的设计。

在本篇文章中，我们将介绍如何使用 HTML 和 SVG 创建汉堡图标。

创建 HTML 结构

首先，我们需要创建一个布局，使汉堡图标在页面中居中。下面是一个基本的 HTML 结构示例，可以在页面中使用汉堡图标：

<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

创建样式

现在我们需要在 CSS 中添加样式以使汉堡图标变得有吸引力。在 CSS 中，我们将为总容器（.hamburger）和单个线条（.line）添加样式。下面是基本样式的例子：

.hamburger {
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  display: block;
  width: 30px;
  height: 3px;
  margin: 0 0 5px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

通过使用 display: flex 和 justify-content: center，我们可以使 .hamburger 容器中的所有内容在水平方向上居中对齐。 align-items: center 使垂直方向上居中对齐。

.line 类则定义了单条线的样式，其中 width、height 和 margin 属性定义了线的尺寸和间距。background-color 属性给线条着上黑色色彩。

添加动画

现在，我们需要为汉堡图标添加一些简单的 CSS 动画。我们想要实现的动画效果是当鼠标在图标上悬停时，线条变为一个叉子图标。

这是在悬停状态下，每条线条的样式：

.hamburger:hover .line:nth-child(1) {
  transform: translate3d(0, 6px, 0) rotate(45deg);
}

.hamburger:hover .line:nth-child(2) {
  opacity: 0;
}

.hamburger:hover .line:nth-child(3) {
  transform: translate3d(0, -6px, 0) rotate(-45deg);
}

当鼠标悬停在 .hamburger 容器上时，.hamburger 容器内的三条线条分别进行不同的动作。

第一条线条会被向下移动，并以 45 度角旋转。第二条线条完全消失。第三条线条向上移动并以 -45 度角旋转。

通过 transform: translate3d 和 transform: rotate 属性，我们可以实现这种变换。同时，使用 transition 属性，我们可以为每个变换慢慢地添加动画效果。

使用 SVG 替换线条

最后，我们将使用 SVG 形状作为汉堡图标替换线条，SVG 图标可以缩放且不失真。 我们可以使用 ::before 和 ::after 选择器为 SVG 添加样式。

添加 SVG 相关的 CSS 样式：

.hamburger svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #000;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover svg {
  stroke: #f00;
}

我们可以将 fill 属性设置为 none，并设置 stroke 属性来给汉堡图标添加颜色。stroke-width 属性用于设置线条的粗细程度。

使用 stroke-linecap: round 和 stroke-linejoin: round 属性，我们可以摆脱直角的线条，并使用圆角来替换它们。

通过在 hover 状态下更改线条颜色，我们可以为汉堡图标的动画添加进一步的视觉效果。

完整代码

最后，将所有的 HTML 和 CSS 代码组合起来，我们可以得到完整的代码：

<div class="hamburger">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="3" y1="12" x2="21" y2="12" />
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="18" x2="21" y2="18" />
  </svg>
</div>

.hamburger {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #000;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover svg {
  stroke: #f00;
}

总结

通过 HTML 和 SVG，我们可以很简单地创造出一个漂亮的、动态的汉堡图标。 这个图标代表着现代的设计，可以轻松适应任何页面或设计方案。