创意css汉堡菜单动画,CSS3 汉堡菜单变十字结动画

CSS

语言：

CSSSCSS

确定

.wrapper {

position: absolute;

left: 50%;

top: 50%;

cursor: pointer;

}

.hamburger {

width: 36px;

}

.hamburger .hamburger-piece {

margin-top: 8px;

}

.hamburger .hamburger-piece .half {

width: 50%;

float: left;

height: 4px;

background-color: cornflowerblue;

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

transition: transform 0.3s;

}

.hamburger .hamburger-piece.top-bun .left {

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.hamburger .hamburger-piece.top-bun .right {

-webkit-transform-origin: 20px 0;

-ms-transform-origin: 20px 0;

transform-origin: 20px 0;

}

.hamburger .hamburger-piece.bottom-bun .left {

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.hamburger .hamburger-piece.bottom-bun .right {

-webkit-transform-origin: 20px 0;

-ms-transform-origin: 20px 0;

transform-origin: 20px 0;

}

.hamburger .hamburger-piece.meat .whole {

margin: 0 auto;

width: 100%;

height: 4px;

background-color: cornflowerblue;

-webkit-transition: width 0.3s;

transition: width 0.3s;

}

.hamburger .hamburger-piece.top-bun:after,

.hamburger .hamburger-piece.bottom-bun:after {

content: "";

display: table;

}

.hamburger.is-toggled .top-bun .left.half {

-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(4px, -4px);

transform: rotateZ(45deg) scaleX(1.25) translate(4px, -4px);

}

.hamburger.is-toggled .top-bun .right.half {

-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(-3px, -5px);

transform: rotateZ(-45deg) scaleX(1.25) translate(-3px, -5px);

}

.hamburger.is-toggled .bottom-bun .left.half {

-webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(0px, 5px);

transform: rotateZ(-45deg) scaleX(1.25) translate(0px, 5px);

}

.hamburger.is-toggled .bottom-bun .right.half {

-webkit-transform: rotateZ(45deg) scaleX(1.25) translate(1px, 6px);

transform: rotateZ(45deg) scaleX(1.25) translate(1px, 6px);

}

.hamburger.is-toggled .meat .whole {

width: 0px;

}