CSS 中的太阳系

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

因为事情变得更好、更简单——我们现在只需几行 CSS 就可以做一个

响应式太阳系。

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

雷雷

我们使用

有序列表，因为行星是有序的。

接下来，我们取消默认的

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


雷雷

现在，对于行星轨迹，我们将使用“网格堆栈”。我们可以简单地

堆叠所有网格项，而不是位置：绝对和一堆翻译：
雷雷

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



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


雷雷

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

雷雷现在我们有：


为了动画

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

雷雷注意偏移路径。这是简化轨迹动画的
关键

，因为我们要做的就是沿着
1. 的形状移动行星。是这个：

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

   结论

   ---

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

   使用真实距离和尺寸（使用 calc()）

   向
   添加变换：rotateX(angle)使其成为伪 3D：

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

   快乐编码！

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