太陽系已經用CSS很多次完成了－只需搜尋Codepen！那為什麼還要再做一次呢？
因為事情變得更好、更簡單——我們現在只需幾行 CSS 就可以創建一個響應式太陽系。
讓我們從一些非常基本的標記開始：
我們使用有序列表，因為行星是有序的。
接下來，我們取消預設的
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中文網其他相關文章！
