<div id="hamburger">
<div class="topleft"></div>
<div class="topright"></div>
<div class="bottomright"></div>
<div class="bottomleft"></div>
</div>
$size: 12px;
$spread: 12px;
$trans: cubic-bezier(.9,0,.1,1);
#hamburger {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
& > * {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: $size;
height: $size;
border-radius: calc(#{$size} / 2);
border: 1px solid #191919;
animation: anim 1000ms $trans infinite;
}
.topleft { left: calc(50% - #{$spread}); top: calc(50% - #{$spread}); transform: translate(-50%,-50%) rotate(45deg); }
.topright { left: calc(50% + #{$spread}); top: calc(50% - #{$spread}); transform: translate(-50%,-50%) rotate(45deg); }
.bottomright { left: calc(50% + #{$spread}); top: calc(50% + #{$spread}); transform: translate(-50%,-50%) rotate(-45deg); }
.bottomleft { left: calc(50% - #{$spread}); top: calc(50% + #{$spread}); transform: translate(-50%,-50%) rotate(-45deg); }
@keyframes anim {
25% { top: 50%; left: 50%; bottom: auto; right: auto; height: $size; width: 10px; }
50% { top: 50%; left: 50%; bottom: auto; right: auto; height: 48px; width: 6px; }
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.