如何创建 - 菜单图标
了解如何使用 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;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
步骤 3) 添加 JavaScript:
实例解析
HTML & CSS: 我们使用与以前相同的样式，只是这一次，我们在每个 <div> 元素周围包装了一个容器元素，并为每个元素指定了一个类名。
当用户将鼠标移到 div（条）上时，容器元素用于显示指针符号。 单击它时，它将执行一个 JavaScript 函数，为其添加一个新的类名，这将改变每个水平条的样式:第一个和最后一个条被转换并旋转到字母"x"。 中间的条逐渐消失并变得不可见。
