android 汉堡菜单动画,纯CSS实现的3个汉堡菜单点击过渡变换动画

CSS

语言：

CSSSCSS

确定

/*

You can adjust the menu bar color or the line width vars

*/

.spinner-master {

position: relative;

margin: 50px auto;

height: calc(5px * 10);

width: calc(5px * 10);

}

.spinner-master * {

transition: all 0.3s;

box-sizing: border-box;

}

.spinner-master input[type="checkbox"] {

display: none;

}

.spinner-master label {

cursor: pointer;

position: absolute;

z-index: 99;

height: 100%;

width: 100%;

top: 10px;

left: 0;

}

.spinner-master .spinner1,

.spinner-master .spinner2,

.spinner-master .spinner3,

.spinner-master .spinner4 {

position: absolute;

height: 5px;

width: 100%;

background-color: #000;

}

.spinner-master .diagonal.part-1 {

position: relative;

float: left;

}

.spinner-master .diagonal.part-2 {

position: relative;

float: left;

margin-top: calc(5px * 1.3);

}

.spinner-master .horizontal {

position: relative;

float: left;

margin-top: calc(5px * 1.3);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .horizontal,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .horizontal,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .horizontal,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .horizontal {

opacity: 0;

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .diagonal.part-2,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-2,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-2,

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .diagonal.part-2 {

margin-top: calc(-1 * ( 5px + (5px * 2.2)));

}

/* Style One */

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .diagonal.part-1 {

transform: rotate(405deg);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin1 > .diagonal.part-2 {

transform: rotate(-405deg);

}

/*Style two*/

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-1 {

transform: rotate(135deg);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin2 > .diagonal.part-2 {

transform: rotate(-135deg);

}

/*Style three*/

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .horizontal {

transform: scale(2, 1);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-1 {

transform: rotate(-135deg);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-2 {

transform: rotate(135deg);

}

/*Style four*/

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .horizontal {

transform: translate(-100px, 0px);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .diagonal.part-1 {

transform: rotate(-135deg);

}

.spinner-master input[type="checkbox"]:checked ~ .spinner-spin4 > .diagonal.part-2 {

transform: rotate(135deg);

}