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);
}