html隐藏汉堡按钮,SVG实现的汉堡菜单和关闭按钮

CSS

语言：

CSSSCSS

确定

body {

background: #000;

margin: 2em;

}

#nav-lines {

background: #000;

width: 64px;

height: 64px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -32px;

margin-top: -32px;

cursor: pointer;

}

#nav-lines .rect {

stroke-width: 0;

stroke: #fe0000;

fill: transparent;

transform-origin: 50% 50%;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

#nav-lines .cross-line {

stroke: #ffffff;

stroke-width: 0;

transform-origin: 50% 50%;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

#nav-lines .nav-line {

stroke: #fff;

transform-origin: 50% 50%;

stroke-width: 2px;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

#nav-lines:hover .rect {

stroke-width: 1;

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

#nav-lines:hover .nav-line {

-moz-transform: scale(0.5, 0.5);

-ms-transform: scale(0.5, 0.5);

-webkit-transform: scale(0.5, 0.5);

transform: scale(0.5, 0.5);

}

#nav-lines:hover #nav-line-1 {

-moz-transform: translateY(10px) scale(0.5);

-ms-transform: translateY(10px) scale(0.5);

-webkit-transform: translateY(10px) scale(0.5);

transform: translateY(10px) scale(0.5);

}

#nav-lines:hover #nav-line-3 {

-moz-transform: translateY(-10px) scale(0.5);

-ms-transform: translateY(-10px) scale(0.5);

-webkit-transform: translateY(-10px) scale(0.5);

transform: translateY(-10px) scale(0.5);

}

#nav-lines.active .cross-line {

stroke-width: 2;

-moz-transform: scale(0.8);

-ms-transform: scale(0.8);

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

#nav-lines.active .nav-line,

#nav-lines.active #nav-line-1,

#nav-lines.active #nav-line-3 {

-moz-transform: scale(0.01);

-ms-transform: scale(0.01);

-webkit-transform: scale(0.01);

transform: scale(0.01);

}

#nav-lines.active:hover .cross-line {

-moz-transform: scale(0.6);

-ms-transform: scale(0.6);

-webkit-transform: scale(0.6);

transform: scale(0.6);

}