<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">


↑ Insert the most common viewport meta tag


              .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


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