How to create animation effects of the planets in the solar system with h5 and c3-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

php中世界最好的语言

Jan 23, 2018 am 09:50 AM

html5 solar system

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.

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!