用 CSS 实现太阳系运行效果

介绍

在编程的浩瀚宇宙中，我们总是在探索能够以最简洁的方式创造出最酷炫效果的方法。而使用 CSS 制作响应式太阳系，绝对能提升你的编程乐趣。
如何用 CSS 实现这个神奇的太阳系呢？关键在于巧妙运用 CSS 的动画、定位和尺寸属性。通过定义不同的元素来代表太阳、行星和轨道，然后利用 CSS 动画来模拟行星的旋转运动。

实现

让我们从一些非常基本的HTML开始：

<ol>
  <li class="sun"></li>
  <li class="mercury"></li>
  <li class="venus"></li>
  <li class="earth"></li>
  <li class="mars"></li>
  <li class="jupiter"></li>
  <li class="saturn"></li>
  <li class="uranus"></li>
  <li class="neptune"></li>
</ol>

我们使用 <li/> 有序列表，因为行星是有序的。

接下来，我们默认的 -styles，并将其样式设置为网格：

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

现在，对于行星轨迹，我们将使用 “grid stack”。我们可以简单地将所有网格项堆叠起来：

li {
   
  grid-area: 1 / -1;
  place-self: center;
}

通过为每个行星设置一个 -variable（用于直径），使用 ，我们得到：

使用伪元素添加行星：::after

li::after {
   
  aspect-ratio: 1 / 1;
  background: var(--b