html在线练习,HTML5在线教程练习题 - 汉堡菜单变形

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 100%;

height: 100vh;

}

button.burger {

width: 60px;

height: 30px;

border: none;

background: transparent;

position: relative;

cursor: pointer;

margin: 50px;

}

button.burger:focus {

outline: none;

}

button.burger.burger1:after,

button.burger.burger1:before,

button.burger.burger1 span {

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

background: #923cbe;

}

button.burger.burger1:after,

button.burger.burger1:before {

content: "";

}

button.burger.burger1:after {

top: 0px;

margin-top: 0px;

-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

}

button.burger.burger1:before {

bottom: 0px;

margin-bottom: 0px;

-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

}

button.burger.burger1 span {

top: 50%;

margin-top: -2px;

visibility: visible;

opacity: 1;

-webkit-transition: opacity 0.2s, svisibility 0.2s;

transition: opacity 0.2s, svisibility 0.2s;

}

button.burger.burger1.on:after {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: 50%;

margin-top: -2px;

-webkit-transition: all 0.2s, 0.2s transform 0.4s;

transition: all 0.2s, 0.2s transform 0.4s;

}

button.burger.burger1.on:before {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

bottom: 50%;

margin-bottom: -2px;

-webkit-transition: all 0.2s, 0.2s transform 0.4s;

transition: all 0.2s, 0.2s transform 0.4s;

}

button.burger.burger1.on span {

visibility: hidden;

-webkit-transition: opacity 0.4s, visibility 0.4s;

transition: opacity 0.4s, visibility 0.4s;

opacity: 0;

}

button.burger.burger2:after,

button.burger.burger2:before,

button.burger.burger2 span {

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

display: block;

background: #923cbe;

}

button.burger.burger2:after,

button.burger.burger2:before {

content: "";

-webkit-transition: 0.3s width 0.4s;

transition: 0.3s width 0.4s;

}

button.burger.burger2:after {

top: 0px;

left: 0px;

margin-top: 0px;

}

button.burger.burger2:before {

bottom: 0px;

right: 0px;

margin-bottom: 0px;

}

button.burger.burger2 span {

top: 50%;

margin-top: -2px;

-webkit-transition: -webkit-transform 0.3s;

transition: -webkit-transform 0.3s;

transition: transform 0.3s;

transition: transform 0.3s, -webkit-transform 0.3s;

}

button.burger.burger2 span:before {

content: "";

background: #923cbe;

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

-webkit-transition: -webkit-transform 0.3s;

transition: -webkit-transform 0.3s;

transition: transform 0.3s;

transition: transform 0.3s, -webkit-transform 0.3s;

}

button.burger.burger2.on:after {

-webkit-transition: all 0.2s;

transition: all 0.2s;

width: 0%;

left: 0px;

}

button.burger.burger2.on:before {

-webkit-transition: all 0.2s;

transition: all 0.2s;

width: 0%;

right: 0px;

}

button.burger.burger2.on span {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transition: 0.3s transform 0.4s;

transition: 0.3s transform 0.4s;

}

button.burger.burger2.on span:before {

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

-webkit-transition: 0.3s transform 0.4s;

transition: 0.3s transform 0.4s;

}

button.burger.burger3:after,

button.burger.burger3:before,

button.burger.burger3 span {

width: 100%;

height: 4px;

border-radius: 100px;

position: absolute;

left: 0px;

background: #923cbe;

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

button.burger.burger3:after,

button.burger.burger3:before {

content: "";

}

button.burger.burger3:after {

top: 0px;

margin-top: 0px;

-webkit-transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: 0.2s all 0.4s, -webkit-transform 0.2s;

transition: transform 0.2s, 0.2s all 0.4s;

transition: transform 0.2s, 0.2s all 0.4s, -webkit-transform 0.2s;

}

button.burger.burger3:before {

bottom: 0px;

margin-bottom: 0px;

}

button.burger.burger3 span {

top: 50%;

margin-top: -2px;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

button.burger.burger3.on:after {

-webkit-transform: rotate(-135deg) translate(-10px, -10px);

transform: rotate(-135deg) translate(-10px, -10px);

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

button.burger.burger3.on:before {

-webkit-transform: rotate(-135deg) translate(-10px, -10px);

transform: rotate(-135deg) translate(-10px, -10px);

bottom: 50%;

margin-bottom: -2px;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

button.burger.burger3.on span {

-webkit-transform: rotate(135deg);

transform: rotate(135deg);

}