Awesome Rings!

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); } }
JAVASCRIPT
Expand for more options Login