HTML
<div id='parent'>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
<div class='ring'></div>
</div>
SCSS
$n: 30;
$border-width: 3vmin;
html {
background-color: black;
}
#parent {
perspective: 3000px;
}
.ring {
position: absolute;
border-radius: 50%;
border: $border-width solid;
animation-name: rot;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@for $i from 0 to $n {
&:nth-child(#{$i + 1}) {
$r1: $i*$border-width;
width: $r1;
height: $r1;
$r: $r1 / 2 + $border-width;
left: calc(50vw - #{$r});
top: calc(50vh - #{$r});
animation-delay: $i*70ms;
border-color: hsl($i*7+100, 50, 70);
}
}
}
@keyframes rot {
to {
transform: rotateY(360deg) rotateX(360deg);
}
}
