如何 - 菜单图标
学习如何使用 CSS 创建菜单图标。
如何创建菜单图标
如果您没有使用图标库，可以使用 CSS 创建一个基本的菜单图标。
步骤 1) 添加 HTML
示例
<div></div>
<div></div>
<div></div>
步骤 2) 添加 CSS
示例解释
The 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”。中间的条目会淡出并变得不可见。
