CodePen

HTML

            
              <div class="circles circle1">
<div class="circles circle2">
<div class="circles circle3">
<div class="circles circle4">
<div class="circles circle5">
<div class="circles circle6">
<div class="circles circle7">
<div class="circles circle8">
<div class="circles circle9">
<div class="circles circle10">

</div><!--circle10-->
</div><!--circle9-->
</div><!--circle8-->
</div><!--circle7-->
</div><!--circle6-->
</div><!--circle5-->
</div><!--circle4-->
</div><!--circle3-->
</div><!--circle2-->
</div><!--circle1-->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .circles{ position:absolute; border-radius:50%; left:50%; transform:translateX(-50%); }
.circle1{ width:500px; height:500px; top:50%; background:black;
animation:turningCircle 5s linear infinite; }
.circle2{ width:450px; height:450px; background:white; }
.circle3{ width:400px; height:400px; background:black; }
.circle4{ width:350px; height:350px; background:white; }
.circle5{ width:300px; height:300px; background:black; }
.circle6{ width:250px; height:250px; background:white; }
.circle7{ width:200px; height:200px; background:black; }
.circle8{ width:150px; height:150px; background:white; bottom:0; }
.circle9{ width:100px; height:100px; background:black; bottom:0; }
.circle10{ width:50px; height: 50px; background:white; bottom:0; }
@keyframes turningCircle {
   from { transform:translateX(-50%) translateY(-50%) rotate(0deg); }
   to   { transform:translateX(-50%) translateY(-50%) rotate(360deg); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // For more check out zachsaucier.com
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................