header
input#navi[type="checkbox"]
label[for="navi"]
.dots
.dots
.dots
.dots
.dots
.dots
.dots
.dots
.dots
View Compiled
header {
width: 100%;
height: 80px;
#navi {
display: none;
&:checked {
~ label {
transform: rotate(225deg);
.dots:nth-of-type(1) { filter: opacity(0); }
.dots:nth-of-type(2) { transform: scaleY(4.75); }
.dots:nth-of-type(3) { filter: opacity(0); }
.dots:nth-of-type(4) { transform: scaleX(4.75); }
.dots:nth-of-type(5) { filter: opacity(0); }
.dots:nth-of-type(6) { transform: scaleX(4.75); }
.dots:nth-of-type(7) { filter: opacity(0); }
.dots:nth-of-type(8) { transform: scaleY(4.75); }
.dots:nth-of-type(9) { filter: opacity(0); }
}
}
}
label {
cursor: pointer;
position: fixed;
top: 32px;
right: 32px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 26px;
height: 26px;
transition: .5s;
.dots {
width: 6px;
height: 6px;
background-color: black;
transition: .5s;
&:nth-of-type(3n+2) {
margin: 0 4px;
}
&:nth-of-type(2) { transform-origin: top; }
&:nth-of-type(4) { transform-origin: left; }
&:nth-of-type(6) { transform-origin: right; }
&:nth-of-type(8) { transform-origin: bottom; }
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.