Orbit CSS を使用した太陽系-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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 を作成しました。そしてその中に水星を入れます。

from-3x、.grow-3x、shrink-60 などの Orbit ユーティリティクラスがいくつかあることに注目してください。これらは、放射状のレイアウトと要素のサイズを調整するために使用されます。たとえば、 .from-3x は、軌道が 3 軌道長のオフセットで開始されることを示します。 .grow-3x は、太陽が 3 つの軌道の大きさを持つことを示し、.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-* という 1 つの新しいユーティリティクラスを使用します。

すべての衛星、環、小惑星を追加すると、次のようになります。

The Solar System with Orbit CSS

ステップ 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%
  );
}

ログイン後にコピー

すべての画像を配置すると、次のようになります:

The Solar System with Orbit CSS

ステップ 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 太陽系が完成しました:

The Solar System with Orbit CSS

ステップ 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 は、ほぼあらゆる種類のラジアルインターフェイスを作成できるように設計されているので、ぜひ見てください。これを使って何か作成した場合は、ぜひお知らせください。