abstract：#menu-trigger {width: 100px;height: 100px;top: -34px; left: 50%;margin-left: -50px;position: absolute;cursor: pointer;background: rgba(255, 255, 255, 1);border-radius: 50%;z-index: 1000;#hamburger { &
#menu-trigger {
width: 100px;
height: 100px;
top: -34px; left: 50%;
margin-left: -50px;
position: absolute;
cursor: pointer;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
z-index: 1000;
#hamburger {
position: absolute;
height: 100%;
width: 100%;
span {
transition: .25s ease-in-out;
width: 48px;
height: 4px;
position: relative;
top: 24px;
left: 26px;
margin: 10px 0;
&:nth-child(1) {
transition-delay: .5s;
}
&:nth-child(2) {
transition-delay: .625s;
}
&:nth-child(3) {
transition-delay: .75s;
}
}
}
#close {
position: absolute;
height: 100%;
width: 100%;
transform: rotate(45deg);
span {
transition: .25s ease-in-out;
&:nth-child(1) {
height: 0%;
width: 4px;
position: absolute;
top: 25%;
left: 48px;
transition-delay: 0s;
}
&:nth-child(2) {
width: 0%;
height: 4px;
position: absolute;
left: 25%;
top: 48px;
transition-delay: .25s;
}
}
}
&.open {
box-shadow: 0 15px 31px rgba(0,0,0,0.08), 0 7px 15px rgba(0,0,0,0.04);
#hamburger {
span {
width: 0%;
&:nth-child(1) {
transition-delay: 0s;
}
&:nth-child(2) {
transition-delay: .125s;
}
&:nth-child(3) {
transition-delay: .25s;
}
}
}
#close {
span {
&:nth-child(1) {
height: 50%;
transition-delay: .625s;
}
}
span {
&:nth-child(2) {
width: 50%;
transition-delay: .375s;
}
}
}
}
}
带动画效果css 导航
Correcting teacher：天蓬老师Correction time：2019-04-17 13:50:38
Teacher's summary：你的html部分呢, 如果只提交关键代码, 下次放一张图