Memukau

Lihat animasi grafik ini dengan risiko sendiri. Pengarang tidak bertanggung jawab jika anda terpukau!

Demo

HTML view ▼

<div style="height: 810px;">
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
<div class='holder'>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
  <div class='a'></div>
</div>
</div>
<style>
.holder {
  position: relative;
  animation: h 16s infinite;
  animation-timing-function: linear;
  width: 1px;
  height: 1px;
  top: 50%;
  left: 50%;
}
.holder:nth-child(1) {
  animation-delay: 0s;
}
.holder:nth-child(2) {
  animation-delay: 1s;
}
.holder:nth-child(3) {
  animation-delay: 2s;
}
.holder:nth-child(4) {
  animation-delay: 3s;
}
.holder:nth-child(5) {
  animation-delay: 4s;
}
.holder:nth-child(6) {
  animation-delay: 5s;
}
.holder:nth-child(7) {
  animation-delay: 6s;
}
.holder:nth-child(8) {
  animation-delay: 7s;
}
.holder:nth-child(9) {
  animation-delay: 8s;
}
.holder:nth-child(10) {
  animation-delay: 9s;
}
.holder:nth-child(11) {
  animation-delay: 10s;
}
.holder:nth-child(12) {
  animation-delay: 11s;
}
.holder:nth-child(13) {
  animation-delay: 12s;
}
.holder:nth-child(14) {
  animation-delay: 13s;
}
.holder:nth-child(15) {
  animation-delay: 14s;
}
.holder:nth-child(16) {
  animation-delay: 15s;
}
@keyframes h {
  from {
    transform: rotate(0) translate(-50%, -50%);
  }
  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
.a {
  width: 4px;
  height: 40px;
  position: absolute;
}
.a:nth-child(1) {
  animation: a1 4s infinite;
  animation-delay: 0.08s;
  background-color: #39c69e;
  width: 1.5px;
  height: 33.4px;
}
@keyframes a1 {
  0% {
    transform: translate(10px, 10px) rotate(60deg);
    background-color: #39c69e;
  }
  50% {
    transform: translate(10px, 10px) rotate(120deg);
    background-color: #61c639;
  }
  100% {
    transform: translate(10px, 10px) rotate(60deg);
    background-color: #39c69e;
  }
}
.a:nth-child(2) {
  animation: a2 4s infinite;
  animation-delay: 0.16s;
  background-color: #39c6a5;
  width: 2px;
  height: 34.8px;
}
@keyframes a2 {
  0% {
    transform: translate(10px, 20px) rotate(60deg);
    background-color: #39c6a5;
  }
  50% {
    transform: translate(20px, 10px) rotate(120deg);
    background-color: #5ac639;
  }
  100% {
    transform: translate(10px, 20px) rotate(60deg);
    background-color: #39c6a5;
  }
}
.a:nth-child(3) {
  animation: a3 4s infinite;
  animation-delay: 0.24s;
  background-color: #39c6ac;
  width: 2.5px;
  height: 36.2px;
}
@keyframes a3 {
  0% {
    transform: translate(10px, 30px) rotate(60deg);
    background-color: #39c6ac;
  }
  50% {
    transform: translate(30px, 10px) rotate(120deg);
    background-color: #53c639;
  }
  100% {
    transform: translate(10px, 30px) rotate(60deg);
    background-color: #39c6ac;
  }
}
.a:nth-child(4) {
  animation: a4 4s infinite;
  animation-delay: 0.32s;
  background-color: #39c6b3;
  width: 3px;
  height: 37.6px;
}
@keyframes a4 {
  0% {
    transform: translate(10px, 40px) rotate(60deg);
    background-color: #39c6b3;
  }
  50% {
    transform: translate(40px, 10px) rotate(120deg);
    background-color: #4cc639;
  }
  100% {
    transform: translate(10px, 40px) rotate(60deg);
    background-color: #39c6b3;
  }
}
.a:nth-child(5) {
  animation: a5 4s infinite;
  animation-delay: 0.4s;
  background-color: #39c6ba;
  width: 3.5px;
  height: 39px;
}
@keyframes a5 {
  0% {
    transform: translate(10px, 50px) rotate(60deg);
    background-color: #39c6ba;
  }
  50% {
    transform: translate(50px, 10px) rotate(120deg);
    background-color: #45c639;
  }
  100% {
    transform: translate(10px, 50px) rotate(60deg);
    background-color: #39c6ba;
  }
}
.a:nth-child(6) {
  animation: a6 4s infinite;
  animation-delay: 0.48s;
  background-color: #39c6c1;
  width: 4px;
  height: 40.4px;
}
@keyframes a6 {
  0% {
    transform: translate(10px, 60px) rotate(60deg);
    background-color: #39c6c1;
  }
  50% {
    transform: translate(60px, 10px) rotate(120deg);
    background-color: #3ec639;
  }
  100% {
    transform: translate(10px, 60px) rotate(60deg);
    background-color: #39c6c1;
  }
}
.a:nth-child(7) {
  animation: a7 4s infinite;
  animation-delay: 0.56s;
  background-color: #39c3c6;
  width: 4.5px;
  height: 41.8px;
}
@keyframes a7 {
  0% {
    transform: translate(10px, 70px) rotate(60deg);
    background-color: #39c3c6;
  }
  50% {
    transform: translate(70px, 10px) rotate(120deg);
    background-color: #39c63c;
  }
  100% {
    transform: translate(10px, 70px) rotate(60deg);
    background-color: #39c3c6;
  }
}
.a:nth-child(8) {
  animation: a8 4s infinite;
  animation-delay: 0.64s;
  background-color: #39bcc6;
  width: 5px;
  height: 43.2px;
}
@keyframes a8 {
  0% {
    transform: translate(10px, 80px) rotate(60deg);
    background-color: #39bcc6;
  }
  50% {
    transform: translate(80px, 10px) rotate(120deg);
    background-color: #39c643;
  }
  100% {
    transform: translate(10px, 80px) rotate(60deg);
    background-color: #39bcc6;
  }
}
.a:nth-child(9) {
  animation: a9 4s infinite;
  animation-delay: 0.72s;
  background-color: #39b5c6;
  width: 5.5px;
  height: 44.6px;
}
@keyframes a9 {
  0% {
    transform: translate(10px, 90px) rotate(60deg);
    background-color: #39b5c6;
  }
  50% {
    transform: translate(90px, 10px) rotate(120deg);
    background-color: #39c64a;
  }
  100% {
    transform: translate(10px, 90px) rotate(60deg);
    background-color: #39b5c6;
  }
}
.a:nth-child(10) {
  animation: a10 4s infinite;
  animation-delay: 0.8s;
  background-color: #39aec6;
  width: 6px;
  height: 46px;
}
@keyframes a10 {
  0% {
    transform: translate(10px, 100px) rotate(60deg);
    background-color: #39aec6;
  }
  50% {
    transform: translate(100px, 10px) rotate(120deg);
    background-color: #39c651;
  }
  100% {
    transform: translate(10px, 100px) rotate(60deg);
    background-color: #39aec6;
  }
}
.a:nth-child(11) {
  animation: a11 4s infinite;
  animation-delay: 0.88s;
  background-color: #39a7c6;
  width: 6.5px;
  height: 47.4px;
}
@keyframes a11 {
  0% {
    transform: translate(10px, 110px) rotate(60deg);
    background-color: #39a7c6;
  }
  50% {
    transform: translate(110px, 10px) rotate(120deg);
    background-color: #39c658;
  }
  100% {
    transform: translate(10px, 110px) rotate(60deg);
    background-color: #39a7c6;
  }
}
.a:nth-child(12) {
  animation: a12 4s infinite;
  animation-delay: 0.96s;
  background-color: #39a0c6;
  width: 7px;
  height: 48.8px;
}
@keyframes a12 {
  0% {
    transform: translate(10px, 120px) rotate(60deg);
    background-color: #39a0c6;
  }
  50% {
    transform: translate(120px, 10px) rotate(120deg);
    background-color: #39c65f;
  }
  100% {
    transform: translate(10px, 120px) rotate(60deg);
    background-color: #39a0c6;
  }
}
.a:nth-child(13) {
  animation: a13 4s infinite;
  animation-delay: 1.04s;
  background-color: #3999c6;
  width: 7.5px;
  height: 50.2px;
}
@keyframes a13 {
  0% {
    transform: translate(10px, 130px) rotate(60deg);
    background-color: #3999c6;
  }
  50% {
    transform: translate(130px, 10px) rotate(120deg);
    background-color: #39c666;
  }
  100% {
    transform: translate(10px, 130px) rotate(60deg);
    background-color: #3999c6;
  }
}
.a:nth-child(14) {
  animation: a14 4s infinite;
  animation-delay: 1.12s;
  background-color: #3992c6;
  width: 8px;
  height: 51.6px;
}
@keyframes a14 {
  0% {
    transform: translate(10px, 140px) rotate(60deg);
    background-color: #3992c6;
  }
  50% {
    transform: translate(140px, 10px) rotate(120deg);
    background-color: #39c66d;
  }
  100% {
    transform: translate(10px, 140px) rotate(60deg);
    background-color: #3992c6;
  }
}
.a:nth-child(15) {
  animation: a15 4s infinite;
  animation-delay: 1.2s;
  background-color: #398bc6;
  width: 8.5px;
  height: 53px;
}
@keyframes a15 {
  0% {
    transform: translate(10px, 150px) rotate(60deg);
    background-color: #398bc6;
  }
  50% {
    transform: translate(150px, 10px) rotate(120deg);
    background-color: #39c674;
  }
  100% {
    transform: translate(10px, 150px) rotate(60deg);
    background-color: #398bc6;
  }
}
.a:nth-child(16) {
  animation: a16 4s infinite;
  animation-delay: 1.28s;
  background-color: #3984c6;
  width: 9px;
  height: 54.4px;
}
@keyframes a16 {
  0% {
    transform: translate(10px, 160px) rotate(60deg);
    background-color: #3984c6;
  }
  50% {
    transform: translate(160px, 10px) rotate(120deg);
    background-color: #39c67b;
  }
  100% {
    transform: translate(10px, 160px) rotate(60deg);
    background-color: #3984c6;
  }
}
.a:nth-child(17) {
  animation: a17 4s infinite;
  animation-delay: 1.36s;
  background-color: #397dc6;
  width: 9.5px;
  height: 55.8px;
}
@keyframes a17 {
  0% {
    transform: translate(10px, 170px) rotate(60deg);
    background-color: #397dc6;
  }
  50% {
    transform: translate(170px, 10px) rotate(120deg);
    background-color: #39c682;
  }
  100% {
    transform: translate(10px, 170px) rotate(60deg);
    background-color: #397dc6;
  }
}
.a:nth-child(18) {
  animation: a18 4s infinite;
  animation-delay: 1.44s;
  background-color: #3976c6;
  width: 10px;
  height: 57.2px;
}
@keyframes a18 {
  0% {
    transform: translate(10px, 180px) rotate(60deg);
    background-color: #3976c6;
  }
  50% {
    transform: translate(180px, 10px) rotate(120deg);
    background-color: #39c689;
  }
  100% {
    transform: translate(10px, 180px) rotate(60deg);
    background-color: #3976c6;
  }
}
.a:nth-child(19) {
  animation: a19 4s infinite;
  animation-delay: 1.52s;
  background-color: #396fc6;
  width: 10.5px;
  height: 58.6px;
}
@keyframes a19 {
  0% {
    transform: translate(10px, 190px) rotate(60deg);
    background-color: #396fc6;
  }
  50% {
    transform: translate(190px, 10px) rotate(120deg);
    background-color: #39c690;
  }
  100% {
    transform: translate(10px, 190px) rotate(60deg);
    background-color: #396fc6;
  }
}
.a:nth-child(20) {
  animation: a20 4s infinite;
  animation-delay: 1.6s;
  background-color: #3968c6;
  width: 11px;
  height: 60px;
}
@keyframes a20 {
  0% {
    transform: translate(10px, 200px) rotate(60deg);
    background-color: #3968c6;
  }
  50% {
    transform: translate(200px, 10px) rotate(120deg);
    background-color: #39c697;
  }
  100% {
    transform: translate(10px, 200px) rotate(60deg);
    background-color: #3968c6;
  }
}
.a:nth-child(21) {
  animation: a21 4s infinite;
  animation-delay: 1.68s;
  background-color: #3961c6;
  width: 11.5px;
  height: 61.4px;
}
@keyframes a21 {
  0% {
    transform: translate(10px, 210px) rotate(60deg);
    background-color: #3961c6;
  }
  50% {
    transform: translate(210px, 10px) rotate(120deg);
    background-color: #39c69e;
  }
  100% {
    transform: translate(10px, 210px) rotate(60deg);
    background-color: #3961c6;
  }
}
.a:nth-child(22) {
  animation: a22 4s infinite;
  animation-delay: 1.76s;
  background-color: #395ac6;
  width: 12px;
  height: 62.8px;
}
@keyframes a22 {
  0% {
    transform: translate(10px, 220px) rotate(60deg);
    background-color: #395ac6;
  }
  50% {
    transform: translate(220px, 10px) rotate(120deg);
    background-color: #39c6a5;
  }
  100% {
    transform: translate(10px, 220px) rotate(60deg);
    background-color: #395ac6;
  }
}
.a:nth-child(23) {
  animation: a23 4s infinite;
  animation-delay: 1.84s;
  background-color: #3953c6;
  width: 12.5px;
  height: 64.2px;
}
@keyframes a23 {
  0% {
    transform: translate(10px, 230px) rotate(60deg);
    background-color: #3953c6;
  }
  50% {
    transform: translate(230px, 10px) rotate(120deg);
    background-color: #39c6ac;
  }
  100% {
    transform: translate(10px, 230px) rotate(60deg);
    background-color: #3953c6;
  }
}
.a:nth-child(24) {
  animation: a24 4s infinite;
  animation-delay: 1.92s;
  background-color: #394cc6;
  width: 13px;
  height: 65.6px;
}
@keyframes a24 {
  0% {
    transform: translate(10px, 240px) rotate(60deg);
    background-color: #394cc6;
  }
  50% {
    transform: translate(240px, 10px) rotate(120deg);
    background-color: #39c6b3;
  }
  100% {
    transform: translate(10px, 240px) rotate(60deg);
    background-color: #394cc6;
  }
}
.a:nth-child(25) {
  animation: a25 4s infinite;
  animation-delay: 2s;
  background-color: #3945c6;
  width: 13.5px;
  height: 67px;
}
@keyframes a25 {
  0% {
    transform: translate(10px, 250px) rotate(60deg);
    background-color: #3945c6;
  }
  50% {
    transform: translate(250px, 10px) rotate(120deg);
    background-color: #39c6ba;
  }
  100% {
    transform: translate(10px, 250px) rotate(60deg);
    background-color: #3945c6;
  }
}
.a:nth-child(26) {
  animation: a26 4s infinite;
  animation-delay: 2.08s;
  background-color: #393ec6;
  width: 14px;
  height: 68.4px;
}
@keyframes a26 {
  0% {
    transform: translate(10px, 260px) rotate(60deg);
    background-color: #393ec6;
  }
  50% {
    transform: translate(260px, 10px) rotate(120deg);
    background-color: #39c6c1;
  }
  100% {
    transform: translate(10px, 260px) rotate(60deg);
    background-color: #393ec6;
  }
}
.a:nth-child(27) {
  animation: a27 4s infinite;
  animation-delay: 2.16s;
  background-color: #3c39c6;
  width: 14.5px;
  height: 69.8px;
}
@keyframes a27 {
  0% {
    transform: translate(10px, 270px) rotate(60deg);
    background-color: #3c39c6;
  }
  50% {
    transform: translate(270px, 10px) rotate(120deg);
    background-color: #39c3c6;
  }
  100% {
    transform: translate(10px, 270px) rotate(60deg);
    background-color: #3c39c6;
  }
}
.a:nth-child(28) {
  animation: a28 4s infinite;
  animation-delay: 2.24s;
  background-color: #4339c6;
  width: 15px;
  height: 71.2px;
}
@keyframes a28 {
  0% {
    transform: translate(10px, 280px) rotate(60deg);
    background-color: #4339c6;
  }
  50% {
    transform: translate(280px, 10px) rotate(120deg);
    background-color: #39bcc6;
  }
  100% {
    transform: translate(10px, 280px) rotate(60deg);
    background-color: #4339c6;
  }
}
.a:nth-child(29) {
  animation: a29 4s infinite;
  animation-delay: 2.32s;
  background-color: #4a39c6;
  width: 15.5px;
  height: 72.6px;
}
@keyframes a29 {
  0% {
    transform: translate(10px, 290px) rotate(60deg);
    background-color: #4a39c6;
  }
  50% {
    transform: translate(290px, 10px) rotate(120deg);
    background-color: #39b5c6;
  }
  100% {
    transform: translate(10px, 290px) rotate(60deg);
    background-color: #4a39c6;
  }
}
.a:nth-child(30) {
  animation: a30 4s infinite;
  animation-delay: 2.4s;
  background-color: #5139c6;
  width: 16px;
  height: 74px;
}
@keyframes a30 {
  0% {
    transform: translate(10px, 300px) rotate(60deg);
    background-color: #5139c6;
  }
  50% {
    transform: translate(300px, 10px) rotate(120deg);
    background-color: #39aec6;
  }
  100% {
    transform: translate(10px, 300px) rotate(60deg);
    background-color: #5139c6;
  }
}
.a:nth-child(31) {
  animation: a31 4s infinite;
  animation-delay: 2.48s;
  background-color: #5839c6;
  width: 16.5px;
  height: 75.4px;
}
@keyframes a31 {
  0% {
    transform: translate(10px, 310px) rotate(60deg);
    background-color: #5839c6;
  }
  50% {
    transform: translate(310px, 10px) rotate(120deg);
    background-color: #39a7c6;
  }
  100% {
    transform: translate(10px, 310px) rotate(60deg);
    background-color: #5839c6;
  }
}
.a:nth-child(32) {
  animation: a32 4s infinite;
  animation-delay: 2.56s;
  background-color: #5f39c6;
  width: 17px;
  height: 76.8px;
}
@keyframes a32 {
  0% {
    transform: translate(10px, 320px) rotate(60deg);
    background-color: #5f39c6;
  }
  50% {
    transform: translate(320px, 10px) rotate(120deg);
    background-color: #39a0c6;
  }
  100% {
    transform: translate(10px, 320px) rotate(60deg);
    background-color: #5f39c6;
  }
}
.a:nth-child(33) {
  animation: a33 4s infinite;
  animation-delay: 2.64s;
  background-color: #6639c6;
  width: 17.5px;
  height: 78.2px;
}
@keyframes a33 {
  0% {
    transform: translate(10px, 330px) rotate(60deg);
    background-color: #6639c6;
  }
  50% {
    transform: translate(330px, 10px) rotate(120deg);
    background-color: #3999c6;
  }
  100% {
    transform: translate(10px, 330px) rotate(60deg);
    background-color: #6639c6;
  }
}
.a:nth-child(34) {
  animation: a34 4s infinite;
  animation-delay: 2.72s;
  background-color: #6d39c6;
  width: 18px;
  height: 79.6px;
}
@keyframes a34 {
  0% {
    transform: translate(10px, 340px) rotate(60deg);
    background-color: #6d39c6;
  }
  50% {
    transform: translate(340px, 10px) rotate(120deg);
    background-color: #3992c6;
  }
  100% {
    transform: translate(10px, 340px) rotate(60deg);
    background-color: #6d39c6;
  }
}
.a:nth-child(35) {
  animation: a35 4s infinite;
  animation-delay: 2.8s;
  background-color: #7439c6;
  width: 18.5px;
  height: 81px;
}
@keyframes a35 {
  0% {
    transform: translate(10px, 350px) rotate(60deg);
    background-color: #7439c6;
  }
  50% {
    transform: translate(350px, 10px) rotate(120deg);
    background-color: #398bc6;
  }
  100% {
    transform: translate(10px, 350px) rotate(60deg);
    background-color: #7439c6;
  }
}
.a:nth-child(36) {
  animation: a36 4s infinite;
  animation-delay: 2.88s;
  background-color: #7b39c6;
  width: 19px;
  height: 82.4px;
}
@keyframes a36 {
  0% {
    transform: translate(10px, 360px) rotate(60deg);
    background-color: #7b39c6;
  }
  50% {
    transform: translate(360px, 10px) rotate(120deg);
    background-color: #3984c6;
  }
  100% {
    transform: translate(10px, 360px) rotate(60deg);
    background-color: #7b39c6;
  }
}
.a:nth-child(37) {
  animation: a37 4s infinite;
  animation-delay: 2.96s;
  background-color: #8239c6;
  width: 19.5px;
  height: 83.8px;
}
@keyframes a37 {
  0% {
    transform: translate(10px, 370px) rotate(60deg);
    background-color: #8239c6;
  }
  50% {
    transform: translate(370px, 10px) rotate(120deg);
    background-color: #397dc6;
  }
  100% {
    transform: translate(10px, 370px) rotate(60deg);
    background-color: #8239c6;
  }
}
.a:nth-child(38) {
  animation: a38 4s infinite;
  animation-delay: 3.04s;
  background-color: #8939c6;
  width: 20px;
  height: 85.2px;
}
@keyframes a38 {
  0% {
    transform: translate(10px, 380px) rotate(60deg);
    background-color: #8939c6;
  }
  50% {
    transform: translate(380px, 10px) rotate(120deg);
    background-color: #3976c6;
  }
  100% {
    transform: translate(10px, 380px) rotate(60deg);
    background-color: #8939c6;
  }
}
.a:nth-child(39) {
  animation: a39 4s infinite;
  animation-delay: 3.12s;
  background-color: #9039c6;
  width: 20.5px;
  height: 86.6px;
}
@keyframes a39 {
  0% {
    transform: translate(10px, 390px) rotate(60deg);
    background-color: #9039c6;
  }
  50% {
    transform: translate(390px, 10px) rotate(120deg);
    background-color: #396fc6;
  }
  100% {
    transform: translate(10px, 390px) rotate(60deg);
    background-color: #9039c6;
  }
}
.a:nth-child(40) {
  animation: a40 4s infinite;
  animation-delay: 3.2s;
  background-color: #9739c6;
  width: 21px;
  height: 88px;
}
@keyframes a40 {
  0% {
    transform: translate(10px, 400px) rotate(60deg);
    background-color: #9739c6;
  }
  50% {
    transform: translate(400px, 10px) rotate(120deg);
    background-color: #3968c6;
  }
  100% {
    transform: translate(10px, 400px) rotate(60deg);
    background-color: #9739c6;
  }
}
  </style>

Tutup

Demo ini dipetik dari codepen