CSS Menu Icon

HTML

<div class="menu-icon-wrapper open" onclick="toggle(this)">
    <div class="menu-icon-first"></div>
    <div class="menu-icon-second"></div>
    <div class="menu-icon-thrid"></div>
</div>

CSS

.menu-icon-wrapper {
    display: inline-block;
    cursor: pointer;
}

.menu-icon-first, .menu-icon-second, .menu-icon-thrid {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
    transition: 0.4s;
}

/* 旋转第一条横线 */
.close .menu-icon-first {
    -webkit-transform: rotate(-45deg) translate(-8px, 7px);
    transform: rotate(-45deg) translate(-8px, 7px);
}

/* 隐藏第二条横线 */
.close .menu-icon-second {
    opacity: 0;
}

/* 旋转第三条横线 */
.close .menu-icon-thrid {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

JavaScript

function toggle(menu) {
    menu.classList.toggle("open");
    menu.classList.toggle("close");
}