منظومه خورشیدی در CSS

با استفاده از سی اس اس به سادگی میتوان سیارات منظومه شمسی را انیمیت یا متحرک کرد.

بیایید با چند نشانه گذاری بسیار اساسی شروع کنیم:

<ol>
  <li class=&quotsun&quot></li>
  <li class=&quotmercury&quot></li>
  <li class=&quotvenus&quot></li>
  <li class=&quotearth&quot></li>
  <li class=&quotmars&quot></li>
  <li class=&quotjupiter&quot></li>
  <li class=&quotsaturn&quot></li>
  <li class=&quoturanus&quot></li>
  <li class=&quotneptune&quot></li>
</ol>

ما از یک لیست مرتب استفاده می کنیم ، زیرا سیارات مرتب هستند.

در مرحله بعد سبک پیشفرض ol را unset میکنیم

ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}