用 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