body {
  background: radial-gradient(red, #111,blue) ;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.alpha {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.circle {
  position: absolute;
  border-radius: 50%;
}




@keyframes pulse {
  0% {width: 10px; height: 10px; border: 1px solid aqua;}
  50% {width: 30px; height: 30px; border: 3px solid red;}
  100% {width: 10px; height: 10px; border: 1px solid aqua;}
}

@keyframes Lrotate {
   0% {transform: rotate(90deg);}
   50% {transform: rotate(0deg);}
   100% {transform: rotate(90deg);}
}

@keyframes Rrotate {
   0% {transform: rotate(-90deg);}
   50% {transform: rotate(0deg);}
   100% {transform: rotate(-90deg);}
}



.c1  { width: 1800px; height: 1800px; border: 20px dashed crimson; animation: Lrotate 6s infinite; animation-delay: 300ms;}
.c2  { width: 1740px; height: 1740px; border: 19px solid orange; animation: Lrotate 6s infinite; animation-delay: 600ms;}
.c3  { width: 1680px; height: 1680px; border: 19px dotted gold; animation: Rrotate 6s infinite; animation-delay: 150ms;}
.c4  { width: 1620px; height: 1620px; border: 18px double lime; animation: Lrotate 6s infinite; animation-delay: 100ms;}
.c5  { width: 1560px; height: 1560px; border: 18px groove cyan; animation: Rrotate 6s infinite; animation-delay: 300ms;}
.c6  { width: 1500px; height: 1500px; border: 17px ridge magenta; animation: Rrotate 6s infinite; animation-delay: 0ms;}
.c7  { width: 1440px; height: 1440px; border: 16px inset white; animation: Lrotate 6s infinite; animation-delay: 100ms;}
.c8  { width: 1380px; height: 1380px; border: 16px outset pink; animation: Rrotate 6s infinite; animation-delay: 600ms;}
.c9  { width: 1320px; height: 1320px; border: 15px dashed deepskyblue; animation: Lrotate 6s infinite; animation-delay: 300ms;}
.c10 { width: 1260px; height: 1260px; border: 15px dotted chartreuse; animation: Rrotate 6s infinite; animation-delay: 0ms;}
.c11 { width: 1200px; height: 1200px; border: 14px double violet; animation: Lrotate 6s infinite; animation-delay: 500ms;}
.c12 { width: 1140px; height: 1140px; border: 14px solid yellow; animation: Rrotate 6s infinite; animation-delay: 250ms;}
.c13 { width: 1080px; height: 1080px; border: 13px dashed hotpink; animation: Lrotate 5s infinite; animation-delay: 100ms;}
.c14 { width: 1020px; height: 1020px; border: 13px groove lightgreen; animation: Rrotate 5s infinite; animation-delay: 400ms;}
.c15 { width: 960px; height: 960px; border: 12px ridge lightblue; animation: Lrotate 5s infinite; animation-delay: 120ms;}
.c16 { width: 900px; height: 900px; border: 12px inset tomato; animation: Rrotate 5s infinite; animation-delay: 600ms;}
.c17 { width: 850px; height: 850px; border: 11px outset lime; animation: Lrotate 5s infinite; animation-delay: 0ms;}
.c18 { width: 800px; height: 800px; border: 11px dashed turquoise; animation: Rrotate 5s infinite; animation-delay: 230ms;}
.c19 { width: 750px; height: 750px; border: 10px dotted salmon; animation: Lrotate 5s infinite; animation-delay: 200ms;}
.c20 { width: 700px; height: 700px; border: 10px double khaki; animation: Rrotate 5s infinite; animation-delay: 500ms;}
.c21 { width: 660px; height: 660px; border: 9px solid violet; animation: Lrotate 5s infinite; animation-delay: 600ms;}
.c22 { width: 620px; height: 620px; border: 9px dashed orange; animation: Rrotate 5s infinite; animation-delay: 100ms;}
.c23 { width: 580px; height: 580px; border: 8px dotted springgreen; animation: Lrotate 5s infinite; animation-delay: 600ms;}
.c24 { width: 540px; height: 540px; border: 8px groove lightcoral; animation: Rrotate 5s infinite; animation-delay: 400ms;}
.c25 { width: 500px; height: 500px; border: 8px ridge aquamarine; animation: Lrotate 5s infinite; animation-delay: 150ms;}
.c26 { width: 460px; height: 460px; border: 7px inset fuchsia; animation: Rrotate 5s infinite; animation-delay: 50ms;}
.c27 { width: 420px; height: 420px; border: 7px outset lightyellow; animation: Lrotate 5s infinite; animation-delay: 100ms;}
.c28 { width: 370px; height: 370px; border: 6px solid white; animation: Lrotate 5s infinite; animation-delay: 500ms;}
.c29 { width: 354px; height: 354px; border: 6px groove tomato; animation: pulse 2s infinite; animation-delay: 400ms;}
.c30 { width: 320px; height: 320px; border: 6px dotted lime; animation: Rrotate 2s infinite; animation-delay: 200ms;}
.c31 { width: 280px; height: 280px; border: 5px double gold; animation: Lrotate 2s infinite; animation-delay: 400ms;}
.c32 { width: 250px; height: 250px; border: 5px solid deepskyblue; animation: Rrotate 2s infinite; animation-delay: 100ms;}
.c33 { width: 220px; height: 220px; border: 4px dashed magenta; animation: Lrotate 3s infinite; animation-delay: 300ms;}
.c34 { width: 195px; height: 195px; border: 4px ridge yellow; animation: Rrotate 3s infinite; animation-delay: 500ms;}
.c35 { width: 170px; height: 170px; border: 4px groove lime; animation: Lrotate 4s infinite; animation-delay: 250ms;}
.c36 { width: 150px; height: 150px; border: 3px inset cyan; animation: Rrotate 4s infinite; animation-delay: 0ms;}
.c37 { width: 130px; height: 130px; border: 3px outset pink; animation: Lrotate 4s infinite; animation-delay: 350ms;}
.c38 { width: 110px; height: 110px; border: 3px solid white; animation: Rrotate 5s infinite; animation-delay: 100ms;}
.c39 { width: 95px; height: 95px; border: 2px dotted wheat; animation: Lrotate 5s infinite; animation-delay: 200ms;}
.c40 { width: 80px; height: 80px; border: 2px double orange; animation: pulse 2s infinite; animation-delay: 300ms;}
.c41 { width: 70px; height: 70px; border: 2px solid gold; animation: pulse 1s infinite; animation-delay: 0ms;}
.c42 { width: 60px; height: 60px; border: 2px dotted lime; animation: Rrotate 3s infinite; animation-delay: 150ms;}
.c43 { width: 52px; height: 52px; border: 2px double cyan; animation: Lrotate 3s infinite; animation-delay: 300ms;}
.c44 { width: 46px; height: 46px; border: 1px solid yellow; animation: Rrotate 3s infinite; animation-delay: 500ms;}
.c45 { width: 40px; height: 40px; border: 1px dashed pink; animation: Lrotate 3s infinite; animation-delay: 250ms;}
.c46 { width: 35px; height: 35px; border: 1px ridge white; animation: Rrotate 3s infinite; animation-delay: 0ms;}
.c47 { width: 30px; height: 30px; border: 1px groove orange; animation: Lrotate 2s infinite; animation-delay: 150ms;}
.c48 { width: 26px; height: 26px; border: 1px inset lime; animation: Rrotate 2s infinite; animation-delay: 250ms;}
.c49 { width: 22px; height: 22px; border: 1px solid violet; animation: Lrotate 2s infinite; animation-delay: 400ms;}
.c50 { width: 18px; height: 18px; border: 1px dotted gold; animation: pulse 1.5s infinite; animation-delay: 200ms;}
.c51 { width: 16px; height: 16px; border: 1px solid white; animation: pulse 1s infinite; animation-delay: 0ms;}
.c52 { width: 14px; height: 14px; border: 1px dotted wheat; animation: Rrotate 2s infinite; animation-delay: 150ms;}
.c53 { width: 12px; height: 12px; border: 1px double yellowgreen; animation: Lrotate 2s infinite; animation-delay: 300ms;}
.c54 { width: 10px; height: 10px; border: 1px solid skyblue; animation: Rrotate 2s infinite; animation-delay: 500ms;}
.c55 { width: 8px; height: 8px; border: 1px dashed pink; animation: Lrotate 2s infinite; animation-delay: 250ms;}
.c56 { width: 7px; height: 7px; border: 1px ridge cyan; animation: Rrotate 2s infinite; animation-delay: 100ms;}
.c57 { width: 6px; height: 6px; border: 1px groove gold; animation: Lrotate 2s infinite; animation-delay: 200ms;}
.c58 { width: 5px; height: 5px; border: 1px inset lime; animation: Rrotate 2s infinite; animation-delay: 300ms;}
.c59 { width: 4px; height: 4px; border: 1px solid blue; animation: Lrotate 2s infinite; animation-delay: 400ms;}
.c60 { width: 3px; height: 3px; border: 1px dotted white; animation: pulse 1.5s infinite; animation-delay: 500ms;}
.c61 { width: 2.6px; height: 2.6px; border: 1px solid wheat; animation: pulse 1.5s infinite; animation-delay: 250ms;}
.c62 { width: 2.3px; height: 2.3px; border: 1px dotted cyan; animation: Lrotate 2s infinite; animation-delay: 100ms;}
.c63 { width: 2px; height: 2px; border: 1px double lime; animation: Rrotate 2s infinite; animation-delay: 200ms;}
.c64 { width: 1.8px; height: 1.8px; border: 1px groove yellow; animation: pulse 1.5s infinite; animation-delay: 300ms;}
.c65 { width: 1.6px; height: 1.6px; border: 1px solid magenta; animation: Rrotate 2s infinite; animation-delay: 400ms;}
.c66 { width: 1.4px; height: 1.4px; border: 1px dashed white; animation: Lrotate 2s infinite; animation-delay: 100ms;}
.c67 { width: 1.2px; height: 1.2px; border: 1px solid cyan; animation: pulse 1.2s infinite; animation-delay: 200ms;}
.c68 { width: 1px; height: 1px; border: 1px dotted gold; animation: pulse 1s infinite; animation-delay: 300ms;}
.c69 { width: 0.8px; height: 0.8px; border: 1px solid lime; animation: pulse 0.8s infinite; animation-delay: 400ms;}
.c70 { width: 0.5px; height: 0.5px; border: 1px solid white; animation: pulse 0.6s infinite; }