如何创建:菜单图标

学习如何使用 CSS 创建菜单图标。

如果您没有使用图标库,您可以使用 CSS 创建一个基本的菜单图标:

菜单图标:

亲自试一试

动画菜单图标(点击它):

亲自试一试

如何创建菜单图标

第一步 - 添加 HTML:

<div></div>
<div></div>
<div></div>

第二步 - 添加 CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

亲自试一试

例子解释:

widthheight 属性指定每个条的宽度和高度。

我们添加了黑色背景颜色以及上下外边距,来创建每个条之间的间距。

动画图标

使用 CSS 和 JavaScript,在被点击时,将菜单图标更改为“取消/删除”图标:

第一步 - 添加 HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

第二步 - 添加 CSS:

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* 旋转第一个栏 */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* 淡出第二栏  */
.change .bar2 {opacity: 0;}

/* 旋转最后一个栏 */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

第三步 - 添加 JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

亲自试一试

例子解释:

HTML 和 CSS:我们使用了与之前相同的样式,但这次我们为每个 <div> 元素包裹了一个容器元素,并为每个元素指定了一个类名。

容器元素用于在用户将鼠标悬停在 divs(线条)上时显示一个指针符号。当它被点击时,它将执行一个 JavaScript 函数,该函数将向其添加一个新的类名,这将改变每个水平条的样式:第一条和最后一条线条将变形并旋转成字母“x”。中间的线条将逐渐淡出并变得不可见。