How to create animation effects of the planets in the solar system with h5 and c3

This time I will show you how to use h5 and c3 to create the animation effect of the planets in the solar system. What are the precautions for using h5 and c3 to create the animation effect of the planets in the solar system? The following is a practical case. Let’s take a look.

Make an animation of the movement of the eight planets in the solar system, excluding the satellites of the planets. All planets revolve around the sun. The planets use solid colors and have no rotation for the time being.

The animation includes: the sun and planets, their orbits, and planetary revolution animations.

First draw a sketch, design the size and position, and calculate the animation execution time based on the revolution period.

The structure of html:

A div with class solarsys, as the solar system container element, the position of the div is relative.

Planetary orbits and planets use div, and the position is absolute.

The container uses relative and the internal elements use absolute positioning. It is relatively simple to achieve the effect. The disadvantage is that the size is fixed.

Css of the solar system container div:

Fixed width, fixed height, relative positioning, and alignment within the page.

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

Css of the sun div:

Set the width, height, left, and top according to the size and position of the design.

Set color.

Convert a square into a circle by generating 50% of the border-radius.

Achieve solar halo through box-shadow's 4-layer color settings.

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

Planet orbit div css:

Assume it is the orbit of Mercury.

Set the width, height, left, and top according to the size and position of the design.

The background color is transparent.

Convert a square into a circle by generating 50% of the border-radius.

Set the type of boder to dotted line.

Set the color of the boder to gray.

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

About how to operate scroll bars in HTML

htmlHow to make thin line tables

What are the display modes of html block-level tags, inline tags, and inline block tags

The above is the detailed content of How to create animation effects of the planets in the solar system with h5 and c3. For more information, please follow other related articles on the PHP Chinese website!