在本教學中，您將學習如何使用 HTML、CSS 和 Orbit CSS 框架 建立動畫太陽系。受到我在 Dev.to 上看到的多樣化且富有創意的太陽系視覺化的啟發，我認為在宇宙中再添加一個會很棒嗎？ .
免責聲明：該項目是我們太陽系的簡化表示，包含主要行星（不包括矮行星），並非旨在進行精確的天文模擬。
首先建立一個 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 入門範本
在 .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%。
完成所有軌道和行星後，我們將得到這個：
增加衛星、光環和小行星
有些行星，如地球、火星、木星、土星、天王星和海王星，有衛星。這些可以放入具有 .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-*，它允許設定起始角度並產生隨機小行星的幻覺。
加入所有衛星、光環和小行星後，我們得到：
這裡我們需要一些太陽和行星的真實影像。起初，我嘗試移動這些圖像來模擬內部旋轉，但動畫背景位置屬性對於 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%
);
}
放置所有影像後，我們得到：
使用 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 太陽系：
為了更真實，我們可以使用 .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);
}
恭喜！ ！ 這是我們太陽系的最終表現。
本教學指導您使用 HTML、CSS 和 Orbit CSS 框架建立動畫太陽系。我希望你覺得它有趣又有趣。 Orbit 旨在創建幾乎任何類型的徑向介面，所以請看一下，如果您用它創建了一些東西，請告訴我！
以上是帶有 Orbit CSS 的太陽系的詳細內容。更多資訊請關注PHP中文網其他相關文章！
