CSS 中的太陽系

太陽系已經用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>

我們使用有序列表，因為行星是有序的。

接下來，我們取消預設的

樣式，並將其設為網格：


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;
}

注意偏移路徑。這是簡化軌跡動畫的關鍵，因為我們要做的就是沿著

1. 的形狀移動行星。是這樣的：
   

   @keyframes rotate {
     to {
       offset-distance: 100%;
     }
   }
   

   僅此而已！我讓 ChatGPT 根據「海王星」計算時間，旋轉速度為 20 秒 — 我們得到：

   ---

   結論

   只用一些規則，我們就用純 CSS 創建了一個簡單的 2d 版本的太陽系。如果您想深入了解，您可以：

   • 使用實際距離和大小（使用 calc()）
   • 向
     增加變換：rotateX(angle)使其成為偽 3D：

   

   ...也許可以使用matrix3d「重新壓平」行星？

   編碼愉快！

以上是CSS 中的太陽系的詳細內容。更多資訊請關注PHP中文網其他相關文章！