html+ccs3 太陽系惑星の回転animation_html/css_WEB-ITnose

惑星の衛星を除く、太陽系の 8 つの惑星の動きのアニメーションを作成します。惑星は当面、単色で回転しません。

エフェクトの静止画像:

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

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

html 構造:

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

惑星の軌道と惑星は両方とも div 内にあり、位置は絶対です。

コンテナは相対配置を使用し、内部要素は絶対配置を使用します。欠点は、サイズが固定されていることです。

    <div class="solarsys">        <!--太阳-->        <div class='sun'></div>        <!--水星轨道-->        <div class='mercuryOrbit'></div>        <!--水星-->        <div class='mercury'></div>        <!--金星轨道-->        <div class='venusOrbit'></div>        <!--金星-->        <div class='venus'></div>        <!--地球轨道-->        <div class='earthOrbit'></div>        <!--地球-->        <div class='earth'></div>        <!--火星轨道-->        <div class='marsOrbit'></div>        <!--火星-->        <div class='mars'></div>        <!--木星轨道-->        <div class='jupiterOrbit'></div>        <!--木星-->        <div class='jupiter'></div>        <!--土星轨道-->        <div class='saturnOrbit'></div>        <!--土星-->        <div class='saturn'></div>        <!--天王星轨道-->        <div class='uranusOrbit'></div>        <!--天王星-->        <div class='uranus'></div>        <!--海王星轨道-->        <div class='neptuneOrbit'></div>        <!--海王星-->        <div class='neptune'></div>    </div>

太陽系コンテナ div の CSS:

固定幅、固定高さ、相対位置、ページ内およびプレイ内での配置。

        .solarsys{            width: 800px;            height: 800px;;            position: relative;            margin: 0 auto;            background-color: #000000;            padding: 0;            transform: scale(1);        }

太陽 div の css:

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

色を設定します。

境界線の半径を 50% 生成して、正方形を円に変換します。

box-shadow の 4 レイヤーのカラー設定で太陽の輝きを実現します。

        .sun {            left:357px;            top:357px;            height: 90px;            width: 90px;            background-color: rgb(248,107,35);            border-radius: 50%;            box-shadow: 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);            position: absolute;            margin: 0;        }

惑星軌道 div の CSS:

それが水星の軌道であると仮定します。

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

背景色は透明です。

境界線の半径を 50% 生成して、正方形を円に変換します。

枠線の種類を点線に設定します。

境界線の色をグレーに設定します。

幅を 1 に設定します。

        .mercuryOrbit {            left:342.5px;            top:342.5px;            height: 115px;            width: 115px;            background-color: transparent;            border-radius: 50%;            border-style: dashed;            border-color: gray;            position: absolute;            border-width: 1px;            margin: 0px;            padding: 0px;        }

惑星 div の CSS:

それが水星だとしましょう。

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

色を設定します。

境界線の半径を 50% 生成して、正方形を円に変換します。

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

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

        .mercury {            left:337.5px;            top:395px;            height: 10px;            width: 10px;            background-color: rgb(166,138,56);            border-radius: 50%;            position: absolute;            transform-origin: 62.5px 5px;            animation: rotate 1.5s infinite linear;        }

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

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

        @keyframes rotate {            100% {                transform: rotate(-360deg);            }        }

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

Chrome でのみテストされています。

すべてのコード:

        <div class="solarsys">        <!--太阳-->        <div class='sun'></div>        <!--水星轨道-->        <div class='mercuryOrbit'></div>        <!--水星-->        <div class='mercury'></div>        <!--金星轨道-->        <div class='venusOrbit'></div>        <!--金星-->        <div class='venus'></div>        <!--地球轨道-->        <div class='earthOrbit'></div>        <!--地球-->        <div class='earth'></div>        <!--火星轨道-->        <div class='marsOrbit'></div>        <!--火星-->        <div class='mars'></div>        <!--木星轨道-->        <div class='jupiterOrbit'></div>        <!--木星-->        <div class='jupiter'></div>        <!--土星轨道-->        <div class='saturnOrbit'></div>        <!--土星-->        <div class='saturn'></div>        <!--天王星轨道-->        <div class='uranusOrbit'></div>        <!--天王星-->        <div class='uranus'></div>        <!--海王星轨道-->        <div class='neptuneOrbit'></div>        <!--海王星-->        <div class='neptune'></div>    </div>