CSS 中的太阳系

太阳系的 CSS 代码已经实现过很多次了——在 Codepen 上搜索一下就知道了！那为什么还要重复一遍呢？

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

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

<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>

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

接下来，我们使用unset默认<ol>样式，并将其设置为网格样式：

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

现在，对于行星轨迹，我们将使用“网格堆栈”。position: absolute我们不用和一堆平移，而是简单地将所有网格项堆叠在一起：

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

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

::after太棒了！让我们使用伪元素添加行星：

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

让我们要求 ChatGPT 为每个行星生成一些漂亮的radial-gradents —— 同时，让我们告诉它我们正在创建太阳系，并要求行星的大小在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;
}

注意offset-path。这是简化轨迹动画的关键，因为我们要沿着形状移动行星所要做的<li>就是：

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

就这样！我让 ChatGPT 根据“海王星”的自转速度计算时间20s——我们得到了：

结论

仅用几条规则，我们就用纯 CSS 创建了一个简单的 2D 太阳系版本。如果您想深入了解，可以：

使用真实的距离和大小（带calc()）
添加一个transform: rotateX(angle)到其中，<ul>使其成为伪 3D：

...也许可以用来matrix3d“重新平坦化”行星？

编码愉快！

更新，2024年8月27日：一些读者指出，比例尺和距离不正确。这是事实，而且是故意的。本文的目的是展示offset-path和网格堆栈的威力。

然而，如果我们计算系统尺寸，其中太阳的宽度为10cqi，海王星的外轨道为100cqi，那么我们得到的 AU（天文单位）为2.994cqi，我们得到：

文章来源：https://dev.to/madsstoumann/the-solar-system-in-css-51bo