android 汉堡菜单动画,纯CSS实现的汉堡菜单折叠展开动画

CSS

语言：

CSSSCSS

确定

.burger {

display: inline-block;

border: 0;

background: none;

outline: 0;

padding: 0;

cursor: pointer;

border-bottom: 4px solid currentColor;

width: 28px;

transition: border-bottom 1s ease-in-out;

-webkit-transition: border-bottom 1s ease-in-out;

}

.burger::-moz-focus-inner {

border: 0;

padding: 0;

}

.burger:before {

content: "";

display: block;

border-bottom: 4px solid currentColor;

width: 100%;

margin-bottom: 5px;

transition: transform 0.5s ease-in-out;

-webkit-transition: -webkit-transform 0.5s ease-in-out;

}

.burger:after {

content: "";

display: block;

border-bottom: 4px solid currentColor;

width: 100%;

margin-bottom: 5px;

transition: transform 0.5s ease-in-out;

-webkit-transition: -webkit-transform 0.5s ease-in-out;

}

.burger-check {

display: none;

}

.burger-check:checked ~ .burger {

border-bottom: 4px solid transparent;

transition: border-bottom 0.8s ease-in-out;

-webkit-transition: border-bottom 0.8s ease-in-out;

}

.burger-check:checked ~ .burger:before {

-ms-transform: rotate(-405deg) translateY(1px) translateX(-3px);

transform: rotate(-405deg) translateY(1px) translateX(-3px);

-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);

transition: transform 0.5s ease-in-out;

-webkit-transition: -webkit-transform 0.5s ease-in-out;

}

.burger-check:checked ~ .burger:after {

-ms-transform: rotate(405deg) translateY(-4px) translateX(-5px);

transform: rotate(405deg) translateY(-4px) translateX(-5px);

-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);

transition: transform 0.5s ease-in-out;

-webkit-transition: -webkit-transform 0.5s ease-in-out;

}

.navigation {

overflow: hidden;

max-height: 0;

-webkit-transition: max-height 0.5s ease-in-out;

transition: max-height 0.5s ease-in-out;

}

.burger-check:checked ~ .navigation {

max-height: 500px;

-webkit-transition: max-height 0.5s ease-in-out;

transition: max-height 0.5s ease-in-out;

}

body {

background-color: floralwhite;

font-family: 'Libre Baskerville', serif;

font-style: italic;

font-size: 30px;

text-align: centeR;

}

a {

color: inherit;

}

small {

font-size: 14px;

}

ul {

margin: 0;

padding: 0;

}

li {

list-style: none;

font-size: 25px;

padding: 5px 0;

}

li a {

text-decoration: none;

}

li a:hover {

text-decoration: underline;

}