CSS での太陽系

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

物事がより良く、よりシンプルになったため、たった数行の CSS でレスポンシブなソーラー システムを構築できるようになりました。

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

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

次に、デフォルトの

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

リーリー

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

幅: var(--d); を使用して、惑星ごとに --d-変数 (直径用) を設定すると、次の結果が得られます:



かっこいい！ ::after 疑似要素を使用して惑星を追加しましょう:


リーリー

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

完全に正確ではありませんが、まだかなりの、認識可能な違いを維持しています:
リーリー

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



異なる軌道速度で惑星を

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

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

鍵です。なぜなら、

1. の形に沿って惑星を移動させるだけでよいからです。これは:
   リーリー
   それだけです！ ChatGPT に「海王星」に基づいて、回転速度 20 秒でタイミングを計算するように依頼しました。すると、次の結果が得られます:

   ---

   結論
   ほんのいくつかのルールを使用して、純粋な CSS で太陽系のシンプルな 2D バージョンを作成しました。さらに詳しく知りたい場合は、次のことができます:
   実際の距離とサイズを使用します(calc()を使用)
   変換を追加します:rotateX(angle) を
   擬似3Dにするには:

   

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

   以上がCSS での太陽系の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。