Bulatan berguling di dalam bulatan

'1.618 Golden Ratio Circles' nama diberi, 9 bulatan, 8 daripadanya berguling di dalam bulatan yang lain. Bulatan tidak bersambung, walaupun kelihatan bersambung di antara satu sama lain.

Demo

HTML view ▼

<div style="background-color: #274e13; display: flex; align-items: center; justify-content: center; min-height: 80vh;">
  <div class="wrap">
  <span class="circle circle-1"><span class="circle circle-2"><span class="circle circle-3"><span class="circle circle-4"><span class="circle circle-5"><span class="circle circle-6"><span class="circle circle-7"><span class="circle circle-8"><span class="circle circle-9"></span></span></span></span></span></span></span></span></span>
  </div>
</div>
<style>
  :root {
  --diameter-2: 309.0169943749474px;
  --diameter-3: 190.98300562505258px;
  --diameter-4: 118.03398874989485px;
  --diameter-5: 72.94901687515771px;
  --diameter-6: 45.084971874737114px;
  --diameter-7: 27.8640450004206px;
  --diameter-8: 17.22092687431651px;
  --diameter-9: 10.64311812610409px;
}
.wrap {
  height: 500px;
  width: 500px;
  position: relative;
}
.circle {
  display: block;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
}
.circle-1 {
  height: 500px;
  width: 500px;
  transform: rotate(90deg);
}
.circle-2 {
  height: var(--diameter-2);
  width: var(--diameter-2);
  top: calc(50% - 154.5084971874737px);
  left: calc(50% - 154.5084971874737px);
  -webkit-animation: rot-2 6000ms infinite linear;
          animation: rot-2 6000ms infinite linear;
}
.circle-3 {
  height: var(--diameter-3);
  width: var(--diameter-3);
  top: calc(50% - 95.49150281252629px);
  left: calc(50% - 95.49150281252629px);
  -webkit-animation: rot-3 3000ms infinite linear;
          animation: rot-3 3000ms infinite linear;
}
.circle-4 {
  height: var(--diameter-4);
  width: var(--diameter-4);
  top: calc(50% - 59.01699437494742px);
  left: calc(50% - 59.01699437494742px);
  -webkit-animation: rot-4 2000ms infinite linear;
          animation: rot-4 2000ms infinite linear;
}
.circle-5 {
  height: var(--diameter-5);
  width: var(--diameter-5);
  top: calc(50% - 36.474508437578855px);
  left: calc(50% - 36.474508437578855px);
  -webkit-animation: rot-5 1500ms infinite linear;
          animation: rot-5 1500ms infinite linear;
}
.circle-6 {
  height: var(--diameter-6);
  width: var(--diameter-6);
  top: calc(50% - 22.542485937368557px);
  left: calc(50% - 22.542485937368557px);
  -webkit-animation: rot-6 1200ms infinite linear;
          animation: rot-6 1200ms infinite linear;
}
.circle-7 {
  height: var(--diameter-7);
  width: var(--diameter-7);
  top: calc(50% - 13.9320225002103px);
  left: calc(50% - 13.9320225002103px);
  -webkit-animation: rot-7 1000ms infinite linear;
          animation: rot-7 1000ms infinite linear;
}
.circle-8 {
  height: var(--diameter-8);
  width: var(--diameter-8);
  top: calc(50% - 8.610463437158256px);
  left: calc(50% - 8.610463437158256px);
  -webkit-animation: rot-8 857.1428571428571ms infinite linear;
          animation: rot-8 857.1428571428571ms infinite linear;
}
.circle-9 {
  height: var(--diameter-9);
  width: var(--diameter-9);
  top: calc(50% - 5.321559063052045px);
  left: calc(50% - 5.321559063052045px);
  -webkit-animation: rot-9 750ms infinite lineart;
          animation: rot-9 750ms infinite linear;
}
@-webkit-keyframes rot-2 {
  from {
    transform: rotate(0deg) translate(95.4915028125263px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(95.4915028125263px) rotate(-360deg);
  }
}
@keyframes rot-2 {
  from {
    transform: rotate(0deg) translate(95.4915028125263px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(95.4915028125263px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-3 {
  from {
    transform: rotate(0deg) translate(59.0169943749474px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(59.0169943749474px) rotate(-360deg);
  }
}
@keyframes rot-3 {
  from {
    transform: rotate(0deg) translate(59.0169943749474px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(59.0169943749474px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-4 {
  from {
    transform: rotate(0deg) translate(36.47450843757887px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(36.47450843757887px) rotate(-360deg);
  }
}
@keyframes rot-4 {
  from {
    transform: rotate(0deg) translate(36.47450843757887px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(36.47450843757887px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-5 {
  from {
    transform: rotate(0deg) translate(22.542485937368568px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(22.542485937368568px) rotate(-360deg);
  }
}
@keyframes rot-5 {
  from {
    transform: rotate(0deg) translate(22.542485937368568px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(22.542485937368568px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-6 {
  from {
    transform: rotate(0deg) translate(13.932022500210298px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(13.932022500210298px) rotate(-360deg);
  }
}
@keyframes rot-6 {
  from {
    transform: rotate(0deg) translate(13.932022500210298px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(13.932022500210298px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-7 {
  from {
    transform: rotate(0deg) translate(8.610463437158257px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(8.610463437158257px) rotate(-360deg);
  }
}
@keyframes rot-7 {
  from {
    transform: rotate(0deg) translate(8.610463437158257px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(8.610463437158257px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-8 {
  from {
    transform: rotate(0deg) translate(5.321559063052044px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(5.321559063052044px) rotate(-360deg);
  }
}
@keyframes rot-8 {
  from {
    transform: rotate(0deg) translate(5.321559063052044px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(5.321559063052044px) rotate(-360deg);
  }
}
@-webkit-keyframes rot-9 {
  from {
    transform: rotate(0deg) translate(3.288904374106211px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(3.288904374106211px) rotate(-360deg);
  }
}
@keyframes rot-9 {
  from {
    transform: rotate(0deg) translate(3.288904374106211px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(3.288904374106211px) rotate(-360deg);
  }
}
</style>

Tutup

Warna latar ditukar, CSS dipetik dari codepen/Wujek_Greg