ホームページ > 記事 > ウェブフロントエンド > Orbit CSS を使用した太陽系
Orbit CSS を使用した太陽系
- PHPzオリジナル
- 2024-09-05 06:00:32368ブラウズ
このチュートリアルでは、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 を作成しました。そしてその中に水星を入れます。
from-3x、.grow-3x、shrink-60 などの Orbit ユーティリティ クラスがいくつかあることに注目してください。これらは、放射状のレイアウトと要素のサイズを調整するために使用されます。たとえば、 .from-3x は、軌道が 3 軌道長のオフセットで開始されることを示します。 .grow-3x は、太陽が 3 つの軌道の大きさを持つことを示し、.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-* という 1 つの新しいユーティリティ クラスを使用します。
すべての衛星、環、小惑星を追加すると、次のようになります。
ステップ 3: 太陽系のスタイルを設定する
ここでは、太陽と惑星の実際の画像が必要になります。最初はこれらの画像を移動して内部回転をシミュレートしようとしましたが、background-position プロパティのアニメーション化は CPU にとって非常に負荷がかかるため、CPU の負荷を避け、スムーズなアニメーションを維持するためにアニメーション GIF を使用することにしました。 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%
);
}
すべての画像を配置すると、次のようになります:
ステップ 4: 太陽系をアニメーション化する
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 太陽系が完成しました:
ステップ 5: 視点
より現実的にするには、.bigbang のパースペクティブと、太陽、月の軌道、惑星の transform: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 の太陽系
- 開発記事: Threejs を使用した太陽系
- CSSアニメーション: Spheres
以上がOrbit CSS を使用した太陽系の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。