HTML+CCS3 Solar System Planetary motion animation

Source: Internet
Author: User
Tags dashed line

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.