用 CSS 实现太阳系运行效果
- 介绍
- 实现
- 最终效果
- 结语
介绍
在编程的浩瀚宇宙中，我们总是在探索能够以最简洁的方式创造出最酷炫效果的方法。而使用 CSS 制作响应式太阳系，绝对能提升你的编程乐趣。
如何用 CSS 实现这个神奇的太阳系呢？关键在于巧妙运用 CSS 的动画、定位和尺寸属性。通过定义不同的元素来代表太阳、行星和轨道，然后利用 CSS 动画来模拟行星的旋转运动。
实现
让我们从一些非常基本的HTML开始：
<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>
我们使用 <li/> 有序列表，因为行星是有序的。
接下来，我们默认的 -styles，并将其样式设置为网格：
ol {all: unset;aspect-ratio: 1 / 1;container-type: inline-size;display: grid;width: 100%;
}
现在，对于行星轨迹，我们将使用 “grid stack”。我们可以简单地将所有网格项堆叠起来：
li {grid-area: 1 / -1;place-self: center;
}
通过为每个行星设置一个 -variable（用于直径），使用 ，我们得到：
使用伪元素添加行星：::after
li::after {aspect-ratio: 1 / 1;background: var(--b