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

幅: var(--d); を使用して、惑星ごとに --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 中国語 Web サイトの他の関連記事を参照してください。