CSS Only Day 3: Orbit Dots — Animasi Orbit Partikel Memutar Murni CSS

Seri CSS Only Day 3: animasi Orbit Dots di mana beberapa partikel titik mengitari poros tengah secara harmonis dengan jejak perpindahan orbit 3D yang halus.

Trik Transformasi Orbit

Kunci gerakan orbit melingkar ada pada manipulasi origin transformasi dan kombinasi rotasi:

.orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: 0 var(--radius, 40px);
  animation: orbit 2s linear infinite;
  animation-delay: var(--delay);
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Tonton di YouTube Shorts

• Tonton di YouTube Shorts: CSS Only Day 3: Orbit Dots