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>

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

接下来，我们取消默认的

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


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. 的形状移动行星。是这样的：
   

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

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

   ---

   结论

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

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

   

   ...也许可以使用matrix3d“重新压平”行星？

   编码愉快！

以上是CSS 中的太阳系的详细内容。更多信息请关注PHP中文网其他相关文章！