Hero image
Published on

Animated Solar System using HTML & CSS

Authors

After hour of brain storming, I finally created an ‘Animated Solar System’ using only HTML and CSS.

How it Started?

As the clock was singing Tik-Tok and so the Hour-of-Code; everything was going smoothly except me. Because, I was in a dilemma what to do? After exploring and surfing through the internet I finally got an Idea to create something easy and using only basic stuffs. Thus, I tightend my laces to move forward and code but still my mind was fill with several how’s, why’s and other and I was baffled. But suddenly a miracle happened, yeah i’ll call it miracle and I got in mind- where to start and how to.

That’s the way I started and I would suggest you should also.

What I created?

That’s a main question, actually. After hour of brain storming, I finally created an ‘Animated Solar System’ using only HTML and CSS. and the image below shows what I created-

Animated Solar system- HTML & CSS Image

How I created?

I created 8 diversions in my HTML file and for every diversion (for a planet) I used respective settings in my CSS file. I used some of the CSS3 properties and some basic in order to provide animation in it and make it cool. How it Works and Looks? So, if you wanna know how it works and looks then I’ll suggest you to go through the URL below-

Watch me building this on youtube.

Guys if you find it interesting and fascinating, let me know. I’ll be happy to know and if anyone needs code snippet then let us know. I’ll be happy to share it too. Till some next tweaks, Keep Sharing & Tweaking! 🙂