如何做 - 菜单图标
学习如何使用 CSS 创建菜单图标。
如何创建菜单图标
如果您不使用图标库，可以使用 CSS 创建一个基本的菜单图标。
步骤 1) 添加 HTML
示例
<div></div>
<div></div>
<div></div>
步骤 2) 添加 CSS
示例解释
width 和 height 属性指定了每个条的宽度和高度。
我们添加了黑色的 background-color，并且顶部和底部的 margin 用于在每个条之间创建一些距离。
动画图标
使用 CSS 和 JavaScript 在点击菜单图标时将其更改为“取消/移除”图标。
步骤 1) 添加 HTML
示例
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
步骤 2) 添加 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);
}
步骤 3) 添加 JavaScript
示例解释
HTML & CSS：我们使用与之前相同的样式，只是这次我们在每个 <div> 元素周围包装了一个容器元素，并为每个元素指定了一个类名。
当用户将鼠标悬停在 div（条）上时，容器元素用于显示一个指针符号。当它被点击时，它将执行一个 JavaScript 函数，该函数会添加一个新的类名，从而改变每个水平条的样式：第一个和最后一个条被转换并旋转成字母“x”。中间的条会淡出并变得不可见。
