HTML+CCS3 Solar System Planetary motion animation

Do a solar system eight planetary animation, not including the planet's satellites, all the planets orbit the Sun, the planet uses a solid color, temporarily without rotation.

Static diagram of the effect:

The animations include: the Sun and the planets, the orbits of the planets, and the animation of planetary orbits.

Draw a good sketch first, design the size and position, and calculate the time of the animation execution according to the period of the revolution.

Structure of HTML:

A div of Class Solarsys, as the Solar System container element, the position of the div is relative.

Both planetary orbits and planets use div,position as absolute.

The container uses the relative and the interior element to adopt the absolute localization way, the comparison simple can realize the effect, the disadvantage is the size is fixed.

    <div class= "Solarsys" > <!--Sun--<div class= ' Sun ' ></div> <!--Mercury Orbit--&gt        ;        <div class= ' mercuryorbit ' ></div> <!--Mercury--<div class= ' Mercury ' ></div> <!--Venus Orbit--<div class= ' venusorbit ' ></div> <!--Venus--<div class= ' Venus ' ;</div> <!--Earth orbit--<div class= ' earthorbit ' ></div> <!--Earth--&lt ;d IV class= ' Earth ' ></div> <!--Mars orbit--<div class= ' marsorbit ' ></div> <!- -Mars---<div class= ' Mars ' ></div> <!--Jupiter Orbit--<div class= ' jupiterorbit ' >< /div> <!--Jupiter--<div class= ' Jupiter ' ></div> <!--Saturn Orbit--<div CLA ss= ' Saturnorbit ' ></div> <!--Saturn--<div class= ' Saturn ' ></div> <!--Uranus ORBIT- &lT;div class= ' uranusorbit ' ></div> <!--Uranus--&LT;DIV class= ' Uranus ' ></div> &LT ;! --Neptune Orbit--<div class= ' neptuneorbit ' ></div> <!--Neptune--<div class= ' Neptune ' &G T;</div> </div>

CSS for the Solar System container div:

Fixed width, fixed height, relative positioning, the page inside the play alignment.

        . solarsys{            width:800px;            height:800px;;            position:relative;            margin:0 Auto;            Background-color: #000000;            padding:0;            Transform:scale (1);        }

CSS for the Sun div:

According to the design size and position, set the width high, left,top.

Sets the color.

Turn a square into a circle by generating a boder-radius of 50%.

The sun glow is achieved by Box-shadow's 4-layer color setting.

        . 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;        }

CSS for planetary Orbit Div:

Let's say mercury orbits.

According to the design size and position, set the width high, left,top.

Transparent background color.

Turn a square into a circle by generating a boder-radius of 50%.

The Boder type is set to a dashed line.

The color of the boder is set to gray.

Width set to 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;        }

CSS for Planetary Div:

Let's say mercury.

According to the design size and position, set the width high, left,top.

Sets the color.

Turn a square into a circle by generating a boder-radius of 50%.

Sets the transfrom-origin to the horizontal and vertical offsets of the upper-left corner of the current div relative to the center point of the entire solar system container. The rotation animation is followed by the rotation of the center point around the effect.

Make a animation, refer to the Rotate Keyframe animation, linear permanent execution, where the execution time is calculated according to the planet's revolution period.

        . 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;        }

Rotate key-Frame animations:

Rotate counterclockwise.

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

The basic structure is complete.

Tested in Chrome only.

All code:

 HTML+CCS3 Solar System Planetary motion