📝 代码查看
2
查看次数
2025-11-07
创建时间
2025-11-07
最后更新
<button class="menu-2">
Menu
<span></span>
<span></span>
<span></span>
</button>
.menu-2 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
right: 50%;
top: 100px;
transform: translateX(-50%);
width: 28px;
height: 18px;
font-size: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.menu-2:after {
content: "";
position: absolute;
left: -12px;
top: -16px;
z-index: -1;
width: 50px;
height: 50px;
background: #E83474;
border-radius: 7px;
opacity: 0.5;
transition: 0.3s ease-out;
}
.menu-2 span {
display: block;
width: 100%;
height: 3px;
background: #000;
margin-bottom: 5px;
border-radius: 5px;
transition: 0.3s ease-out;
}
.menu-2:hover span {
background: #fff;
}
.menu-2:hover:after {
opacity: 1;
}
暂无JavaScript代码