Solar System

LukyVj

• 55678
• 26
• 1

This is an attempt to recre­ate our solar sys­tem using CSS3 fea­tures such as border-radius, trans­forms and anim­a­tions by Alex Giron. The res­ult is sur­pris­ing and quite interesting. The orbits / paths are created using the borders with border-radius to create concentric circles and are positioned absolutely. The planets are also created using this way and are animated using @keyframes with varying timings. Asteroids and other things like the background are images and are animated in the same way.

The information about the planets and stars is done using the transition in which a hidden p tag is shown when it's respective heading is hovered. This demo works best in Safari / Chrome and Firefox only.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room