太陽系は CSS で 何度も 行われてきました。Codepen で検索してください。それで、なぜまた同じことをするのですか?

物事がより良く、よりシンプルになったため、わずか数行の CSS で レスポンシブの太陽系を構築できるようになりました。

非常に基本的なマークアップから始めましょう:

惑星は順番に並べられているため、順序付きリストを使用します。

次に、デフォルトの

スタイルの設定を解除し、グリッドとしてスタイル設定します。


ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}

次に、惑星の軌道については、「グリッド スタック」を使用します。 Position: ABS や大量の翻訳の代わりに、次のようにしてすべてのグリッド項目を単純に スタック することができます。


リ { グリッド領域: 1 / -1; 場所自身：中心。 }

li {
  grid-area: 1 / -1;
  place-self: center;
}

幅: var(--d); を使用して惑星ごとに --d 変数 (直径用) を設定すると、次のようになります:



いいね！ ::after 疑似要素:

を使用して惑星を追加しましょう。


li::after { アスペクト比: 1 / 1; 背景: var(--b); 境界半径: 50%; コンテンツ： ''; 表示: ブロック; 幅: var(--w, 2cqi); }

li {
  grid-area: 1 / -1;
  place-self: center;
}

ChatGPT に各惑星の適切な放射状勾配を生成するように依頼しましょう — そしてその作業中に、太陽系を作成していることを伝え、1 から 6cqi までの惑星サイズを要求しましょう —

完全にはではありません 正確ですが、依然としてかなりの認識可能な違いが維持されています:


.水銀 { --b: 放射状グラデーション(円、#c2c2c2 0%、#8a8a8a 100%); --w: 2.0526cqi; } .ヴィーナス { --b: 放射状グラデーション(円、#f4d03f 0%、#c39c43 100%); --w: 2.6053cqi; } 。地球 { --b: 放射状グラデーション(円、#3a82f7 0%、#2f9e44 80%、#1a5e20 100%); --w: 3.1579cqi; } .mars { --b: 放射状グラデーション(円、#e57373 0%、#af4448 100%); --w: 3.7105cqi; } .ジュピター { --b: 放射状グラデーション(円、#d4a373 0%、#b36d32 50%、#f4e7d3 100%); --w: 4.8158cqi; } .saturn { --b: 放射状勾配(円、#e6dba0 0%、#c2a13e 100%); --w: 5.3684cqi; } .ウラヌス { --b: 放射状グラデーション(円、#7de3f4 0%、#3ba0b5 100%); --w: 4.2632cqi; } .ネプチューン { --b: 放射状グラデーション(円、#4c6ef5 0%、#1b3b8c 100%); --w: 6cqi; }

li {
  grid-area: 1 / -1;
  place-self: center;
}

そして今は次のようになりました:



異なる軌道速度で惑星を

アニメーション化するには、次を追加します:


li::after { /* 以前のスタイル */ アニメーション: var(--t, 3s) 線形無限回転; オフセットパス: コンテンツボックス; }

li {
  grid-area: 1 / -1;
  place-self: center;
}

オフセットパスに注目してください。これが軌道アニメーションを簡略化するための

鍵です。

1. の形状に沿って惑星を動かすために必要なのは次のことだけだからです:


@keyframes 回転 { に { オフセット距離: 100%; } }

li {
  grid-area: 1 / -1;
  place-self: center;
}

以上です！ ChatGPT に「海王星」に基づいて、回転速度 20 秒でタイミングを計算するように依頼しました。すると、次の結果が得られます。

---

結論
ほんのいくつかのルールを使用して、純粋な CSS で太陽系のシンプルな 2D バージョンを作成しました。さらに詳しく知りたい場合は、次のことができます:

実際の距離とサイズを使用します (calc() を使用)
transform:rotateX(angle) を
に追加して擬似 3D にします:



...そして、matrix3d を使用して惑星を「再平坦化」することもできるでしょうか?
コーディングを楽しんでください!