太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回っています。惑星は単色で、今のところ自転しません。 効果静止画像: 
アニメーションには、太陽と惑星、それらの軌道、惑星の公転アニメーションが含まれます。 まずスケッチを描き、サイズと位置を設計し、軌道周期に基づいてアニメーションの実行時間を計算します。 HTMLの構造: 太陽系のコンテナ要素として solarsys クラスを持つ div。この div の位置は相対的です。 惑星軌道と惑星は両方とも div を使用し、位置は絶対です。 コンテナは相対配置を使用し、内部要素は絶対配置を使用するため、効果を実現するのは比較的簡単です。欠点は、サイズが固定されていることです。 XML/HTML コードコンテンツをクリップボードにコピー - < div クラス= "solarsys" >
-
- < div クラス= '太陽' > </ div >
-
-
- < div クラス= 'mercuryOrbit' > </ div >
-
-
- < div クラス= '水銀' > </ div >
-
-
- < div クラス= 'venusOrbit' > </ div >
-
-
- < div クラス= '金星' > </ div >
-
-
- < div クラス= 'earthOrbit' > </ div >
-
-
- < div クラス= '地球' > </ div >
-
-
- < div クラス= 'marsOrbit' > </ div >
-
-
- < div クラス= '火星' > </ div >
-
-
- < div クラス= 'jupiterOrbit' > </ div >
-
-
- < div クラス= 'jupiter' > </ div >
-
-
- < div クラス= 'saturnOrbit' > </ div >
-
-
- < div クラス= 'saturn' > </ div >
-
-
- < div クラス= 'uranusOrbit' > </ div >
-
-
- < div クラス= 'ウラヌス' > </ div >
-
-
- < div クラス= 'neptuneOrbit' > </ div >
-
-
- < div クラス= 'ネプチューン' > </ div >
- </div>
太陽系コンテナ div の CSS: 固定幅、固定高さ、相対配置、ページ内の中央揃え。 CSSコードコンテンツをクリップボードにコピー - .solarsys{
- 幅: 800ピクセル;
- 高さ: 800px ;;
- 位置:相対的;
- マージン:0自動;
- 背景色: #000000 ;
- パディング: 0;
- 変換: スケール(1);
- }
太陽の div の CSS: デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。 色を設定します。 境界の半径を 50% 増やすと、正方形を円に変えることができます。 太陽のハローは、ボックスシャドウの 4 層カラー設定によって実現されます。 CSSコードコンテンツをクリップボードにコピー - 。太陽 {
- 左: 357px ;
- 上: 357px ;
- 高さ: 90px ;
- 幅: 90px ;
- 背景色: rgb (248,107,35);
- 境界線の半径: 50%;
- ボックスシャドウ: 5px 5ピクセル 10ピクセル rgb (248,107,35), - 5px - 5px 10ピクセル rgb (248,107,35), 5px - 5px 10ピクセル rgb (248,107,35), -5ピクセル 5ピクセル 10ピクセル rgb (248,107,35);
- 位置:絶対;
- マージン:0;
- }
惑星軌道 div の CSS: 水星の軌道を想定します。 デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。 背景色は透明です。 境界の半径を 50% 増やすと、正方形を円に変えることができます。 境界線の種類は点線に設定されています。 境界線の色はグレーに設定されています。 幅を1に設定します。 CSSコードコンテンツをクリップボードにコピー - .水銀軌道{
- 左: 342.5px ;
- 上: 342.5px ;
- 高さ: 115px ;
- 幅: 115px ;
- 背景色:透明;
- 境界線の半径: 50%;
- 境界線のスタイル:破線;
- 境界線の色:グレー;
- 位置:絶対;
- 境界線の幅: 1px ;
- マージン: 0px ;
- パディング: 0px ;
- }
惑星 div の CSS: 水星だとしましょう。 デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。 色を設定します。 境界の半径を 50% 増やすと、正方形を円に変えることができます。 transfrom-origin を、太陽系コンテナー全体の中心点を基準とした現在の div の左上隅の水平および垂直オフセットに設定します。回転アニメーションを追加すると、中心点を中心に回転する効果が得られます。 アニメーションを作成し、回転キーフレームアニメーションを参照して、それを永久に線形に実行します。ここでの実行時間は、惑星の公転周期に基づいて計算されます。 CSSコードコンテンツをクリップボードにコピー - .水銀{
- 左: 337.5px ;
- 上: 395px ;
- 高さ: 10px ;
- 幅: 10px ;
- 背景色: rgb (166,138,56);
- 境界線の半径: 50%;
- 位置:絶対;
- 変換原点: 62.5px 5ピクセル;
- アニメーション: 1.5 秒の無限線形回転。
- }
キーフレームアニメーションを回転する: 反時計回りに回転します。 CSSコードコンテンツをクリップボードにコピー - @keyframes 回転 {
- 100% {
- 変換: 回転(-360度);
- }
- }
基本構造は完成しました。 Chrome でのみテスト済み。 完全なコード: XML/HTML コードコンテンツをクリップボードにコピー - <html>
- <ヘッド>
- <スタイル>
- .solarsys{
- 幅: 800ピクセル;
- 高さ: 800px;;
- 位置: 相対的;
- マージン: 0 自動;
- 背景色: #000000;
- パディング: 0;
- 変換: スケール(1);
- }
-
- /*太陽*/
- 。太陽 {
- 左:357px;
- 上:357px;
- 高さ: 90px;
- 幅: 90ピクセル;
- 背景色: rgb(248,107,35);
- 境界線の半径: 50%;
- ボックスの影: 5px 5px 10px rgb(248,107,35)、-5px -5px 10px rgb(248,107,35)、5px -5px 10px rgb(248,107,35)、-5px 5px 10px rgb(248,107,35);
- 位置: 絶対;
- マージン: 0;
- }
-
- /*水銀*/
- .水銀{
- 左:337.5px;
- 上:395px;
- 高さ: 10px;
- 幅: 10px;
- 背景色: rgb(166,138,56);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 62.5px 5px;
- アニメーション: 1.5 秒の無限線形回転。
- }
-
- /* 水星の軌道 */
- .水銀軌道{
- 左:342.5px;
- 上:342.5px;
- 高さ: 115px;
- 幅: 115ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- マージン: 0px;
- パディング: 0px;
- }
-
- /*金星*/
- .金星{
- 左:309px;
- 上:389px;
- 高さ: 22px;
- 幅: 22px;
- 背景色: rgb(246,157,97);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 91px 11px;
- アニメーション: 3.84 秒の無限線形回転。
- }
-
- /* 金星の軌道 */
- .venusOrbit {
- 左:320px;
- 上:320ピクセル;
- 高さ: 160px;
- 幅: 160ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*地球*/
- 。地球 {
- 左:266.5px;
- 上:391ピクセル;
- 高さ: 18px;
- 幅: 18px;
- 背景色: rgb(115,114,174);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 134px 9px;
- アニメーション: 6.25 秒の無限線形回転。
- }
-
- /*地球の軌道*/
- .earthOrbit {
- 左:275px;
- 上:275px;
- 高さ: 250px;
- 幅: 250ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*火星*/
- .mars {
- 左:222.5px;
- 上:392.5px;
- 高さ: 15px;
- 幅: 15px;
- 背景色: rgb(140,119,63);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 177.5px 7.5px;
- アニメーション: 11.75 秒の無限線形回転。
- }
-
- /*火星の軌道*/
- .marsOrbit {
- 左:230px;
- 上:230px;
- 高さ: 340ピクセル;
- 幅: 340ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*木星*/
- .木星{
- 左:134px;
- 上:379ピクセル;
- 高さ: 42px;
- 幅: 42px;
- 背景色: rgb(156,164,143);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 266px 21px;
- アニメーション: 74.04 秒の無限線形回転。
- }
-
- /*木星の軌道*/
- .jupiterOrbit {
- 左:155px;
- 上:155px;
- 高さ: 490ピクセル;
- 幅: 490ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*土星*/
- .土星{
- 左:92px;
- 上:387ピクセル;
- 高さ: 26px;
- 幅: 26px;
- 背景色: rgb(215,171,68);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 308px 13px;
- アニメーション: 183.92 秒の無限線形回転。
- }
-
- /*土星の軌道*/
- .saturn軌道{
- 左:105px;
- 上:105px;
- 高さ: 590ピクセル;
- 幅: 590ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*天王星*/
- .ウラヌス {
- 左:41.5px;
- 上:386.5px;
- 高さ: 27px;
- 幅: 27px;
- 背景色: rgb(164,192,206);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 358.5px 13.5px;
- アニメーション: 524.46 秒の無限線形回転。
- }
-
- /* 天王星の軌道 */
- .uranusOrbit {
- 左:55px;
- 上:55px;
- 高さ: 690ピクセル;
- 幅: 690ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- /*ネプチューン*/
- .ネプチューン {
- 左:10px;
- 上:390ピクセル;
- 高さ: 20px;
- 幅: 20px;
- 背景色: rgb(133,136,180);
- 境界線の半径: 50%;
- 位置: 絶対;
- 変換の原点: 390px 10px;
- アニメーション: 1028.76 秒の無限線形回転。
- }
-
- /* 海王星の軌道 */
- .neptuneOrbit {
- 左:20px;
- 上:20px;
- 高さ: 760ピクセル;
- 幅: 760ピクセル;
- 背景色: 透明;
- 境界線の半径: 50%;
- 境界線スタイル: 破線;
- 境界線の色: グレー;
- 位置: 絶対;
- 境界線の幅: 1px;
- /*マージン: 100px;*/
- /*変換原点: -75px -75px;*/
- /*アニメーション: 4 秒間無限に直線的に回転します。*/
- マージン: 0px;
- パディング: 0px;
- }
-
- @keyframes 回転 {
- 100% {
- 変換: 回転(-360度);
- }
- }
-
- </スタイル>
-
- </ヘッド>
- <本文>
- < div クラス= "solarsys" >
-
- < div クラス= '太陽' > </ div >
-
-
- < div クラス= 'mercuryOrbit' > </ div >
-
-
- < div クラス= '水銀' > </ div >
-
-
- < div クラス= 'venusOrbit' > </ div >
-
-
- < div クラス= '金星' > </ div >
-
-
- < div クラス= 'earthOrbit' > </ div >
-
-
- < div クラス= '地球' > </ div >
-
-
- < div クラス= 'marsOrbit' > </ div >
-
-
- < div クラス= '火星' > </ div >
-
-
- < div クラス= 'jupiterOrbit' > </ div >
-
-
- < div クラス= 'jupiter' > </ div >
-
-
- < div クラス= 'saturnOrbit' > </ div >
-
-
- < div クラス= 'saturn' > </ div >
-
-
- < div クラス= 'uranusOrbit' > </ div >
-
-
- < div クラス= 'ウラヌス' > </ div >
-
-
- < div クラス= 'neptuneOrbit' > </ div >
-
-
- < div クラス= 'ネプチューン' > </ div >
- </div>
- </本文>
- </html>
太陽系の惑星のアニメーション効果を実装するための上記の html+css3 コードは、エディターがあなたと共有するすべてのコンテンツです。参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。 |