CSS3 animation has the power to do anything like simple to complex animation. This tutorial demonstrates the CSS3 solar system animation.

It’s a pure CSS solar system, it does not use any javascript or jquery library to do animation, also it does not use any images for planets or background. All animation, background, and planet shapes are achieved using only CSS.

DemoDownload

The basic idea behind CSS3 solar system

The step by step element placement and styling as follow.

The stars with glow effects are given to the body element’s background using CSS3 radial-gradient property.

The circular orbit for planets are done from <div> tags having 100% border-radius, transparent background and solid 1px border. The planets, moon,rings and shadow are done from creating new element from CSS using properties :after and :before for particualr <div>(circular orbit).

Finally, each <div>(circular orbit) has given infinite rotation with different speed factor. Please look at below HTML and CSS code for more understanding.

HTML

< div id = "solar-system" > < div id = "neptune-circle" > </ div > < div id = "uranus-circle" > </ div > < div id = "saturn-circle" > </ div > < div id = "jupiter-circle" > </ div > < div id = "mars-circle" > </ div > < div id = "earth-circle" > </ div > < div id = "venus-circle" > </ div > < div id = "mercury-circle" > </ div > < div id = "sun" > </ div > </ div >

CSS