如何创建:菜单图标
学习如何使用 CSS 创建菜单图标。
如果您没有使用图标库,您可以使用 CSS 创建一个基本的菜单图标:
如何创建菜单图标
第一步 - 添加 HTML:
<div></div> <div></div> <div></div>
第二步 - 添加 CSS:
div { width: 35px; height: 5px; background-color: black; margin: 6px 0; }
例子解释:
width
和 height
属性指定每个条的宽度和高度。
我们添加了黑色背景颜色以及上下外边距,来创建每个条之间的间距。
动画图标
使用 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”。中间的线条将逐渐淡出并变得不可见。