介绍
在编程的浩瀚宇宙中,我们总是在探索能够以最简洁的方式创造出最酷炫效果的方法。而使用 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