css做汉堡菜单 |css设置最后一个单元格

.burger-menu {
width: 30px;
height: 25px;
position: relative;
cursor: pointer;
}
.burger-menu span {
height: 3px;
width: 100%;
background: #000;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
}
.burger-menu span:nth-child(2) {
top: calc(50% - 5px);
}
.burger-menu span:nth-child(3) {
top: calc(50% + 5px);
}
.burger-menu.active span:nth-child(2) {
transform: rotate(45deg);
top: 50%;
}
.burger-menu.active span:nth-child(1),
.burger-menu.active span:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
.burger-menu.active span:nth-child(3) {
top: 50%;
transform: rotate(-45deg);
}

在这个代码中，大家首先定义了一个名为“burger-menu”的class，其中包含三条横线（使用元素实现）和一个相对定位的父元素。以下是主要的CSS属性和它们的作用：

• width和height属性定义菜单按钮的宽度和高度。
• position: relative让父元素相对定位，以便在激活菜单时用作目标元素。
• cursor: pointer将鼠标指针变为手指，以表明这是一个可交互的元素。
• height和width属性设置横线的高度和宽度。
• top和left属性将横线放置在正确的位置。
• transform属性用于在菜单被激活时旋转横线。
• transition属性为横线添加动画效果。
• activeclass用于当菜单被激活时添加样式。

使用这些属性和样式，可以在您的网站或应用程序中轻松实现漂亮的汉堡菜单效果。