How to Make a Simple Solar System Animation using CSS3

POSTED BY Mohd ShibliCATEGORY Web development

Solar system, in itself, is a marvel. Each one of us, have at some point, tried to visualize all the movements in the solar system by a couple of light years away and stared at the heavenly bodies.But do you know that you can even sketch your imagination on your computer screen?In this tutorial, we will build a simple Solar System consisting of the Earth, the Moon and the Sun using CSS3.So let the coding begin!
Also read: 5 Movies Every Aspiring Programmer Must Watch
Steps:-1) Download the source files from this link and try the Demo.2) Use the html code given below to design the HTML frame code.HTML(solar.html) Now we have successfully designed the frame.Let’s add some colors and attractiveness to our solar system.3) Make a new CSS file and add the following code into it:

CSS(style.css)
The last thing we need to do is to add the animations to the above elements.To do that,4) Add the below code at the end of your CSS file:

The above code will rotate the earth-orbit division 360 degree and each iteration of the animation will take 5 sec for the Earth orbit and 10 sec for the Moon orbit and the iteration count will be infinite so as to continue the animation again and again.Thanks for reading!
Tweet your queries and feedback to @PsychoCodes ,leave a message on our Facebook page or comment below. Also, don’t forget to subscribe to our Newsletter at the top of this page.If you like the article then please share it and help us grow.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

How to Make a Simple Solar System Animation using CSS3

The solar system, in itself, is a marvel. Each one of us, have at some point, tried to visualise all the movements in the solar system by a couple of light years away and stared at the heavenly bodies. But do you know that you can even sketch your imagination on your computer screen? In this tutorial, we will build a simple Solar System consisting of the Earth, the Moon and the Sun using CSS3.

Solar System in CSS3

So let the coding begin!

Also read: Priority Queue Using Linked List in C

Steps:-
1) Download the source files from this link.
2) Use the HTML code given below to design the HTML frame.

HTML(solar.html)

<html> <head> <title>Solar system</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="system"> <img src="http://goo.gl/PmbqZa" id="sun" /> <div id="earth-orbit"> <img src="http://goo.gl/41IWnf" id="earth" /> <div id="moon-orbit"> <div id="moon"></div> </div> </div> </div> </body> </html> 

Now we have successfully designed the frame.

Let’s add some colours and attractiveness to our solar system.

3) Make a new CSS file and add the following code into it:

CSS(style.css)

body{ background: white; width:100\%;  } #system{ width:500px; margin:auto; background:black; height:600px; } #sun{ margin-top:200px; margin-left:150px; position:absolute; } #earth{ position:absolute; margin-left:100px; height:50px; width:50px; } #earth-orbit{ position:absolute; margin-top:100px; margin-left:50px; width:400px; height:400px; border:1px dotted white; border-radius:100\%; -webkit-animation:spin 10s linear infinite; animation:spin 10s linear infinite;  } #moon{ width:10px; height:10px; border-radius:100\%; background:white; position:absolute; margin-left:70px;  } #moon-orbit{ width:100px; height:100px; border-radius:100\%; border:1px dotted white; margin-left:75px; margin-top:-25px; -webkit-animation:spin 5s linear infinite; animation:spin 5s linear infinite; }

The last thing we need to do is to add the animations to the above elements.
To do that,
4) Add the below code at the end of your CSS file:

@-webkit-keyframes spin{ 100\%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes spin{ 100\%{ -webkit-transform:rotate(360deg); transform:rotate(360deg); } 

The above code will rotate the earth-orbit division 360 degree and each iteration of the animation will take 5 sec to the Earth orbit and 10 sec for the Moon orbit and the iteration count will be infinite so as to continue the animation again and again.

See the above code kin action

Thanks for reading!

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don’t forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.


C program to generate all combinations of N-Bit Binary String
10 July 2018

Data Autosave System using PHP, MySQL and AJAX
06 July 2018

Macros in C with examples C Tutorials
30 January 2018

Armstrong Number program in C and C++
29 January 2018

Creating a Fixed Header Navigation Bar with on scroll effect
28 January 2018

C program to find Modular Multiplicative Inverse of two Relatively Prime Numbers
25 January 2018

Понравилась статья? Поделиться с друзьями:
Добавить комментарий