复制元素和样式，改变状态就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
.header-mobile-menu {
width: 16px;
height: 14px;
cursor: pointer;
position: absolute;
top: 24px;
right: 24px;
z-index: 100
}
.header-mobile-menu em {
display: block;
width: 100%;
height: 2px;
background: black;
margin-top: 4px;
transition: transform .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)
}
.header-mobile-menu :first-child {
margin-top: 0
}
.open {
height: auto
}
.open em:nth-child(1) {
transform: translateY(6px) rotate(45deg)
}
.open em:nth-child(2) {
opacity: 0
}
.open em:nth-child(3) {
transform: translateY(-6px) rotate(-45deg)
}
</style>
</head>
<body>
<div class="header-mobile-menu" onclick="changestate()"><em></em><em></em><em></em></div>
<script>
let doms = document.getElementsByClassName("header-mobile-menu")[0];
function changestate(){
if(doms.classList.contains('open')){
doms.classList.remove('open')
}else{
doms.classList.add('open')
}
}
</script>
</body>
</html>
网友评论