太陽系已經用 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>我們使用有序列表，因為行星是有序的。
接下來，我們unset預設的<ol>樣式，並將其樣式設為網格：
ol {
all: unset;
aspect-ratio: 1 / 1;
container-type: inline-size;
display: grid;
width: 100%;
}現在，對於行星軌跡，我們將使用「網格堆疊」。我們可以簡單地使用以下指令堆疊所有網格項，而不是使用position: absolute和一堆翻譯：
li {
grid-area: 1 / -1;
place-self: center;
}透過為每個行星設定一個--d變數（直徑），使用width: var(--d); ，我們得到：
涼爽的！讓我們使用::after偽元素來加入行星：
li::after {
aspect-ratio: 1 / 1;
background: var(--b);
border-radius: 50%;
content: '';
display: block;
width: var(--w, 2cqi);
}讓我們要求 ChatGPT 為每個行星生成一些漂亮的radial-gradent s - 當我們這樣做時，讓我們告訴它我們正在建立太陽系並要求行星大小在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;
}注意offset-path 。這是簡化軌跡動畫的關鍵，因為我們要做的就是沿著<li>的形狀移動行星：
@keyframes rotate {
to {
offset-distance: 100%;
}
}僅此而已！我讓 ChatGPT 根據「Neptune」計算時間，旋轉速度為20s — 我們得到：
https://codepen.io/stoumann/pen/XWLqvgN
結論
只需幾個規則，我們就用純 CSS 建立了一個簡單的 2d 版本的太陽系。如果您想深入了解，您可以：
-
使用實際距離和大小（使用
calc()） -
增加一個
transform: rotateX(angle)到<ul>使其成為偽3D：
……也許可以使用matrix3d “重新壓平”行星？
快樂編碼！
24 年 8 月 27 日更新：有些讀者指出比例和距離不正確。這是真的，而且是故意的。本文的目標是展示
offset-path和網格堆疊的威力。
然而，如果我們用太陽寬度為10cqi 、海王星外軌線為100cqi來計算系統尺寸，那麼我們的 AU（天文單位）為2.994cqi ，我們得到：
原文出處：https://dev.to/madsstoumann/the-solar-system-in-css-51bo
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式