太阳系已经用 CSS 完成了很多次——只需搜索 Codepen 即可！那为什么又要这么做呢？

因为事情变得更好、更简单——我们现在只需几行 CSS 就可以做一个响应式太阳系。

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

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

接下来，我们取消默认的

样式，并将其样式设置为网格：


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

现在，对于行星轨迹，我们将使用“网格堆栈”。我们可以简单地堆叠所有网格项，而不是位置：绝对和一堆翻译：


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

通过为每个行星设置一个 --d 变量（直径），使用宽度：var(--d);，我们得到：



凉爽的！让我们使用 ::after 伪元素添加行星：


li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}

让我们要求 ChatGPT 为每个行星生成一些漂亮的径向梯度 - 当我们这样做时，让我们告诉它我们正在创建太阳系并要求行星大小在 1 到 6cqi 之间 - 不完全 准确，但仍保持相当大的、可识别的差异：


.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}

现在我们有：



为了动画具有不同轨迹速度的行星，我们添加：


li::after {
  /* previous styles */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}

注意偏移路径。这就是简化轨迹动画的关键，因为我们要做的就是沿着

1. 的形状移动行星：


@关键帧旋转{ 到 { 偏移距离：100%； } }

@keyframes rotate {
  to {
    offset-distance: 100%;
  }
}

仅此而已！我要求 ChatGPT 根据“海王星”计算时间，旋转速度为 20 秒 — 我们得到：

---

结论
只需一些规则，我们就用纯 CSS 创建了一个简单的 2d 版本的太阳系。如果您想更深入地了解，您可以：

使用实际距离和尺寸（使用 calc()）
向
添加变换：rotateX(angle) 使其成为伪 3D：



...也许可以使用matrix3d来“重新压平”行星？
编码愉快！