太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星（衛星を除く）のアニメーションを作成します。すべての惑星は太陽の周りを回っています。惑星は単色で、今のところ自転しません。

効果静止画像:

アニメーションには、太陽と惑星、それらの軌道、惑星の公転アニメーションが含まれます。

まずスケッチを描き、サイズと位置を設計し、軌道周期に基づいてアニメーションの実行時間を計算します。

HTMLの構造:

太陽系のコンテナ要素として solarsys クラスを持つ div。この div の位置は相対的です。

惑星軌道と惑星は両方とも div を使用し、位置は絶対です。

コンテナは相対配置を使用し、内部要素は絶対配置を使用するため、効果を実現するのは比較的簡単です。欠点は、サイズが固定されていることです。

太陽系コンテナ div の CSS:

固定幅、固定高さ、相対配置、ページ内の中央揃え。

太陽の div の CSS:

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

色を設定します。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

太陽のハローは、ボックスシャドウの 4 層カラー設定によって実現されます。

惑星軌道 div の CSS:

水星の軌道を想定します。

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

背景色は透明です。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

境界線の種類は点線に設定されています。

境界線の色はグレーに設定されています。

幅を1に設定します。

惑星 div の CSS:

水星だとしましょう。

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

色を設定します。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

transfrom-origin を、太陽系コンテナー全体の中心点を基準とした現在の div の左上隅の水平および垂直オフセットに設定します。回転アニメーションを追加すると、中心点を中心に回転する効果が得られます。

アニメーションを作成し、回転キーフレームアニメーションを参照して、それを永久に線形に実行します。ここでの実行時間は、惑星の公転周期に基づいて計算されます。

キーフレームアニメーションを回転する:

反時計回りに回転します。

基本構造は完成しました。

Chrome でのみテスト済み。

完全なコード:

太陽系の惑星のアニメーション効果を実装するための上記の html+css3 コードは、エディターがあなたと共有するすべてのコンテンツです。参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。