Ajax Loader
×

Solar System

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:

×

Coding Preferences


HTML

CSS

Javascript

More

1 Comments

× New

Sign In to comment

chrisharrison:

Beautiful. One issue though: there only seems to be approx. 7 'months' on Earth!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+