帶有 Orbit CSS 的太陽系-css教學-PHP中文網

首頁

web前端

css教學

帶有 Orbit CSS 的太陽系

PHPz

Sep 05, 2024 am 06:00 AM

在本教學中，您將學習如何使用 HTML、CSS 和 Orbit CSS 框架 建立動畫太陽系。受到我在 Dev.to 上看到的多樣化且富有創意的太陽系視覺化的啟發，我認為在宇宙中再添加一個會很棒嗎？ .

免責聲明：該項目是我們太陽系的簡化表示，包含主要行星（不包括矮行星），並非旨在進行精確的天文模擬。

第 1 步：項目設置

首先建立一個 HTML 文件，您將在其中插入太陽系的程式碼。另外，在 HTML 文件的頭部連結 Orbit CSS 檔案。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The Solar System</title>
   <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
</head>
<body>
   <div class="bigbang">
   <!-- Solar system here -->
   </div>
</body>
</html>

登入後複製

或者，您可以使用 Codepen Orbit 入門範本

第 2 步：太陽系的 HTML 結構

在 .bigbang 類別的 div 中，我們開始加入代表行星、行星軌道和衛星的元素。為此，我們將使用一些 Orbit 元素。

<div class="bigbang">
  <div class="gravity-spot from-3x">
    <div class="orbit-0">
      <div class="satellite sun grow-3x"></div>
    </div>
    <div class="orbit-1">
      <div class="satellite mercury shrink-60"></div>
    </div>
  </div>
</div>

登入後複製

在上面的程式碼中，.bigbang 類別是我們專案的起源。在其中，我們加入了一個代表引力中心的 .gravity-spot 和代表引力中心的軌道 .orbit-0。之後，我們加入了 .satellite 和 .sun 來展示我們的太陽。接下來，我們創建了 .orbit-1，它是一個靠近中心、半徑較小的軌道。我們在裡面放了水星。

請注意，有一些 Orbit 實用程式類，例如 from-3x、.grow-3x 和 Shrink-60。它們用於調整徑向佈局和元素大小。例如，.from-3x 表示軌道將以三個軌道長度的偏移量開始。 .grow-3x 表示太陽的軌道大小為三個軌道，.shrink-60 表示水星的軌道大小為 40%。

完成所有軌道和行星後，我們將得到這個：

The Solar System with Orbit CSS

增加衛星、光環和小行星
有些行星，如地球、火星、木星、土星、天王星和海王星，有衛星。這些可以放入具有 .gravity-spot 類別的元素內以模擬地球的重力。請記住，我們只會創建一些衛星，而不是全部。

<div class="orbit-3">
    <div class="satellite earth">
       <div class="gravity-spot">
          <div class="orbit-1 shrink-30 ">
            <div class="satellite shrink-70 moon"></div>
          </div>
       </div>
    </div>
</div>

登入後複製

在這裡，我們在地球上創建了月球，並使用了一些實用程式類別來調整佈局和大小。

現在是時候為土星和海王星添加光環了。

<div class="orbit-14">
   <div class="satellite neptune grow-0.1x">
      <div class="gravity-spot ring">
         <div class="orbit-1 shrink-30"></div>
      </div>
    </div>
</div>

登入後複製

最後，我們加入了許多小行星來重建小行星帶

<div class="orbit-6 asteroid-belt">
   <div class="satellite shrink-90"></div>
   <div class="satellite shrink-70"></div>
   <div class="satellite shrink-80"></div>
   <div class="satellite shrink-90"></div>
   <!— … —>
</div>
<div class="orbit-6 from-40 asteroid-belt"></div>
<div class="orbit-6 from-20 asteroid-belt"></div>
<!— … —>

登入後複製

這裡我們使用一個新的實用程式類別：from-*，它允許設定起始角度並產生隨機小行星的幻覺。

加入所有衛星、光環和小行星後，我們得到：

The Solar System with Orbit CSS

第三步：設計太陽系的樣式

這裡我們需要一些太陽和行星的真實影像。起初，我嘗試移動這些圖像來模擬內部旋轉，但動畫背景位置屬性對於 CPU 來說非常昂貴，因此我決定使用動畫 gif 來避免炸毀 CPU 並保持流暢的動畫。在 Orbit 中，有一個名為 .capsule 的特殊類，在衛星內部使用，以添加豐富的內容。

地球

    <div class="orbit-3">
      <div class="satellite earth">
        <div class="capsule ">
          <div class="surface"></div>
        </div>
      </div>
    </div>

登入後複製

.earth .surface {
  background: url("https://media.tenor.com/0we9sWcmUtYAAAAi/wingedratsecrettag-earth.gif");
  background-size: auto 100%;
}

登入後複製

** 3D 效果 **

為了產生 3D 幻覺，我們使用一些 css 漸層：

.sun:before,
.surface:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0px,
    yellow,
    rgba(255, 255, 255, 0) 58%
  );
  -webkit-filter: blur(5px);
  z-index: 2;
}
.sun:after,
.surface:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(245, 237, 48, 0),
    rgba(200, 190, 20, 0.2) 50%,
    #575300 100%
  );
}

登入後複製

放置所有影像後，我們得到：

The Solar System with Orbit CSS

第四步：太陽系動畫

使用 CSS 動畫使行星及其衛星繞太陽運行。首先創建一個@keyframe動畫：

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

登入後複製

然後為每個行星和太陽添加動畫屬性。請記住，有必要在行星 .capsule 類別上包含「計數器」動畫，以使其穩定。請注意，由於太陽僅繞其軸旋轉，因此無需包含 .capsule 和“計數器”動畫。

.earth {
  --t: 6315.79ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}

.capsule {
  animation: rotate var(--t, 20s) linear infinite;
}

登入後複製

現在我們有了一個動畫的 2D 太陽系：

The Solar System with Orbit CSS

第五步：透視

為了更真實，我們可以使用 .bigbang 的透視圖和太陽、月亮軌道和行星的 trasnform:rotateX 屬性來產生偽 3D 效果。

.bigbang {
  perspective: 150px;
  perspective-origin: 50% 100%;
}

.gravity-spot {
  transform: rotateX(10deg);
   transform-style: preserve-3d;
}

.orbit-0 {
  transform: rotateX(-5deg);
}

登入後複製

恭喜！！ 這是我們太陽系的最終表現。