太阳系已经用 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; }
注意偏移路径。这是简化轨迹动画的关键,因为我们要做的就是沿着
@keyframes rotate { to { offset-distance: 100%; } }
仅此而已!我让 ChatGPT 根据“海王星”计算时间,旋转速度为 20 秒 — 我们得到:
仅用一些规则,我们就用纯 CSS 创建了一个简单的 2d 版本的太阳系。如果您想深入了解,您可以:
...也许可以使用matrix3d“重新压平”行星?
编码愉快!
以上是CSS 中的太阳系的详细内容。更多信息请关注PHP中文网其他相关文章!