HTML+CSS3 code to realize the animation effect of the solar system planets

HTML+CSS3 code to realize the animation effect of the solar system planets

Make an animation of the eight planets in the solar system, excluding their satellites. All planets revolve around the sun. The planets are solid colors and do not rotate for the time being.

Effect static picture:

The animation includes: the sun and planets, their orbits, and planetary revolution animation.

First draw a sketch, design the size and position, and calculate the animation execution time based on the orbital period.

The structure of html:

A div with class solarsys as the container element of the solar system. The position of this div is relative.

Both planetary orbits and planets use div, and position is absolute.

The container uses relative and the internal elements use absolute positioning, which is relatively simple to achieve the effect. The disadvantage is that the size is fixed.

XML/HTML CodeCopy content to clipboard
  1. < div   class = "solarsys" >   
  2.          <!--Sun-->   
  3.          < div   class = 'sun' > </ div >   
  4.   
  5.          <!--Mercury Orbit-->   
  6.          < div   class = 'mercuryOrbit' > </ div >   
  7.   
  8.          <!--Mercury-->   
  9.          < div   class = 'mercury' > </ div >   
  10.   
  11.          <!--Venus Orbit-->   
  12.          < div   class = 'venusOrbit' > </ div >   
  13.   
  14.          <!--Venus-->   
  15.          < div   class = 'venus' > </ div >   
  16.   
  17.          <!--Earth Orbit-->   
  18.          < div   class = 'earthOrbit' > </ div >   
  19.   
  20.          <!--Earth-->   
  21.          < div   class = 'earth' > </ div >   
  22.   
  23.          <!--Mars Orbit-->   
  24.          < div   class = 'marsOrbit' > </ div >   
  25.   
  26.          <!--Mars-->   
  27.          < div   class = 'mars' > </ div >   
  28.   
  29.          <!--Jupiter Orbit-->   
  30.          < div   class = 'jupiterOrbit' > </ div >   
  31.   
  32.          <!--Jupiter-->   
  33.          < div   class = 'jupiter' > </ div >   
  34.   
  35.          <!--Saturn Orbit-->   
  36.          < div   class = 'saturnOrbit' > </ div >   
  37.   
  38.          <!--Saturn-->   
  39.          < div   class = 'saturn' > </ div >   
  40.   
  41.          <!--Uranus Orbit-->   
  42.          < div   class = 'uranusOrbit' > </ div >   
  43.   
  44.          <!--Uranus-->   
  45.          < div   class = 'uranus' > </ div >   
  46.   
  47.          <!--Neptune's Orbit-->   
  48.          < div   class = 'neptuneOrbit' > </ div >   
  49.   
  50.          <!--Neptune-->   
  51.          < div   class = 'neptune' > </ div >   
  52.      </ div >   

CSS of the solar system container div:

Fixed width, fixed height, relative positioning, and center alignment within the page.

CSS CodeCopy content to clipboard
  1. .solarsys{
  2.              width : 800px ;
  3.              height : 800px ;;
  4.              position : relative ;
  5.              margin : 0 auto ;
  6.              background-color : #000000 ;
  7.              padding : 0;
  8. transform: scale(1);
  9. }

CSS for the sun div:

Set the width, height, left, and top according to the size and position of the design.

Set the color.

By increasing the boder-radius by 50%, we can turn a square into a circle.

The sun halo is achieved through the 4-layer color setting of box-shadow.

CSS CodeCopy content to clipboard
  1. .sun {
  2.              left : 357px ;
  3.              top : 357px ;
  4.              height : 90px ;
  5.              width : 90px ;
  6.              background-color : rgb (248,107,35);
  7.              border -radius: 50%;
  8. box-shadow: 5px   5px   10px   rgb (248,107,35), - 5px - 5px   10px   rgb (248,107,35), 5px - 5px   10px   rgb (248,107,35), -5px   5px   10px   rgb (248,107,35);
  9.              position : absolute ;
  10.              margin : 0;
  11. }

CSS for the planet orbit div:

Assume the orbit of Mercury.

Set the width, height, left, and top according to the size and position of the design.

The background color is transparent.

By increasing the boder-radius by 50%, we can turn a square into a circle.

The boder type is set to a dotted line.

The color of the boder is set to gray.

Set the width to 1.

CSS CodeCopy content to clipboard
  1. .mercuryOrbit {
  2.              left : 342.5px ;
  3.              top : 342.5px ;
  4.              height : 115px ;
  5.              width : 115px ;
  6.              background-color : transparent ;
  7.              border -radius: 50%;
  8.              border-style : dashed ;
  9.              border-color : gray ;
  10.              position : absolute ;
  11.              border-width : 1px ;
  12.              margin : 0px ;
  13.              padding : 0px ;
  14. }

CSS for the planet div:

Let's say it's Mercury.

Set the width, height, left, and top according to the size and position of the design.

Set the color.

By increasing the boder-radius by 50%, we can turn a square into a circle.

Set transfrom-origin to the horizontal and vertical offset of the upper left corner of the current div relative to the center point of the entire solar system container. After adding the rotation animation, the effect is rotation around the center point.

Make an animation, reference the rotate keyframe animation, and execute it linearly forever. The execution time here is calculated based on the planet's revolution period.

CSS CodeCopy content to clipboard
  1. .mercury {
  2.              left : 337.5px ;
  3.              top : 395px ;
  4.              height : 10px ;
  5.              width : 10px ;
  6.              background-color : rgb (166,138,56);
  7.              border -radius: 50%;
  8.              position : absolute ;
  9. transform-origin: 62.5px   5px ;
  10. animation: rotate 1.5s infinite linear;
  11. }

Rotate keyframe animation:

Rotate counterclockwise.

CSS CodeCopy content to clipboard
  1. @keyframes rotate {
  2. 100% {
  3. transform: rotate(-360deg);
  4. }
  5. }

The basic structure is completed.

Only tested in chrome.

Full code:

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2. < head >   
  3.      < style >   
  4. .solarsys{
  5. width: 800px;
  6. height: 800px;;
  7. position: relative;
  8. margin: 0 auto;
  9. background-color: #000000;
  10. padding: 0;
  11. transform: scale(1);
  12. }
  13.   
  14. /*sun*/
  15. .sun {
  16. left:357px;
  17. top:357px;
  18. height: 90px;
  19. width: 90px;
  20. background-color: rgb(248,107,35);
  21. border-radius: 50%;
  22. box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  23. position: absolute;
  24. margin: 0;
  25. }
  26.   
  27. /*Mercury*/
  28. .mercury {
  29. left:337.5px;
  30. top:395px;
  31. height: 10px;
  32. width: 10px;
  33. background-color: rgb(166,138,56);
  34. border-radius: 50%;
  35. position: absolute;
  36. transform-origin: 62.5px 5px;
  37. animation: rotate 1.5s infinite linear;
  38. }
  39.   
  40. /* Mercury orbit */
  41. .mercuryOrbit {
  42. left:342.5px;
  43. top:342.5px;
  44. height: 115px;
  45. width: 115px;
  46. background-color: transparent;
  47. border-radius: 50%;
  48. border-style: dashed;
  49. border-color: gray;
  50. position: absolute;
  51. border-width: 1px;
  52. margin: 0px;
  53. padding: 0px;
  54. }
  55.   
  56. /*Venus*/
  57. .venus {
  58. left:309px;
  59. top:389px;
  60. height: 22px;
  61. width: 22px;
  62. background-color: rgb(246,157,97);
  63. border-radius: 50%;
  64. position: absolute;
  65. transform-origin: 91px 11px;
  66. animation: rotate 3.84s infinite linear;
  67. }
  68.   
  69. /* Orbit of Venus */
  70. .venusOrbit {
  71. left:320px;
  72. top:320px;
  73. height: 160px;
  74. width: 160px;
  75. background-color: transparent;
  76. border-radius: 50%;
  77. border-style: dashed;
  78. border-color: gray;
  79. position: absolute;
  80. border-width: 1px;
  81. /*margin: 100px;*/
  82. /*transform-origin: -75px -75px;*/
  83. /*animation: rotate 4s infinite linear;*/
  84. margin: 0px;
  85. padding: 0px;
  86. }
  87.   
  88. /*Earth*/
  89. .earth {
  90. left:266.5px;
  91. top:391px;
  92. height: 18px;
  93. width: 18px;
  94. background-color: rgb(115,114,174);
  95. border-radius: 50%;
  96. position: absolute;
  97. transform-origin: 134px 9px;
  98. animation: rotate 6.25s infinite linear;
  99. }
  100.   
  101. /*Earth orbit*/
  102. .earthOrbit {
  103. left:275px;
  104. top:275px;
  105. height: 250px;
  106. width: 250px;
  107. background-color: transparent;
  108. border-radius: 50%;
  109. border-style: dashed;
  110. border-color: gray;
  111. position: absolute;
  112. border-width: 1px;
  113. /*margin: 100px;*/
  114. /*transform-origin: -75px -75px;*/
  115. /*animation: rotate 4s infinite linear;*/
  116. margin: 0px;
  117. padding: 0px;
  118. }
  119.   
  120. /*Mars*/
  121. .mars {
  122. left:222.5px;
  123. top:392.5px;
  124. height: 15px;
  125. width: 15px;
  126. background-color: rgb(140,119,63);
  127. border-radius: 50%;
  128. position: absolute;
  129. transform-origin: 177.5px 7.5px;
  130. animation: rotate 11.75s infinite linear;
  131. }
  132.   
  133. /*Mars orbit*/
  134. .marsOrbit {
  135. left:230px;
  136. top:230px;
  137. height: 340px;
  138. width: 340px;
  139. background-color: transparent;
  140. border-radius: 50%;
  141. border-style: dashed;
  142. border-color: gray;
  143. position: absolute;
  144. border-width: 1px;
  145. /*margin: 100px;*/
  146. /*transform-origin: -75px -75px;*/
  147. /*animation: rotate 4s infinite linear;*/
  148. margin: 0px;
  149. padding: 0px;
  150. }
  151.   
  152. /*Jupiter*/
  153. .jupiter {
  154. left:134px;
  155. top:379px;
  156. height: 42px;
  157. width: 42px;
  158. background-color: rgb(156,164,143);
  159. border-radius: 50%;
  160. position: absolute;
  161. transform-origin: 266px 21px;
  162. animation: rotate 74.04s infinite linear;
  163. }
  164.   
  165. /*Jupiter orbit*/
  166. .jupiterOrbit {
  167. left:155px;
  168. top:155px;
  169. height: 490px;
  170. width: 490px;
  171. background-color: transparent;
  172. border-radius: 50%;
  173. border-style: dashed;
  174. border-color: gray;
  175. position: absolute;
  176. border-width: 1px;
  177. /*margin: 100px;*/
  178. /*transform-origin: -75px -75px;*/
  179. /*animation: rotate 4s infinite linear;*/
  180. margin: 0px;
  181. padding: 0px;
  182. }
  183.   
  184. /*Saturn*/
  185. .saturn {
  186. left:92px;
  187. top:387px;
  188. height: 26px;
  189. width: 26px;
  190. background-color: rgb(215,171,68);
  191. border-radius: 50%;
  192. position: absolute;
  193. transform-origin: 308px 13px;
  194. animation: rotate 183.92s infinite linear;
  195. }
  196.   
  197. /*Saturn orbit*/
  198. .saturnOrbit {
  199. left:105px;
  200. top:105px;
  201. height: 590px;
  202. width: 590px;
  203. background-color: transparent;
  204. border-radius: 50%;
  205. border-style: dashed;
  206. border-color: gray;
  207. position: absolute;
  208. border-width: 1px;
  209. /*margin: 100px;*/
  210. /*transform-origin: -75px -75px;*/
  211. /*animation: rotate 4s infinite linear;*/
  212. margin: 0px;
  213. padding: 0px;
  214. }
  215.   
  216. /*Uranus*/
  217. .uranus {
  218. left:41.5px;
  219. top:386.5px;
  220. height: 27px;
  221. width: 27px;
  222. background-color: rgb(164,192,206);
  223. border-radius: 50%;
  224. position: absolute;
  225. transform-origin: 358.5px 13.5px;
  226. animation: rotate 524.46s infinite linear;
  227. }
  228.   
  229. /* Orbit of Uranus */
  230. .uranusOrbit {
  231. left:55px;
  232. top:55px;
  233. height: 690px;
  234. width: 690px;
  235. background-color: transparent;
  236. border-radius: 50%;
  237. border-style: dashed;
  238. border-color: gray;
  239. position: absolute;
  240. border-width: 1px;
  241. /*margin: 100px;*/
  242. /*transform-origin: -75px -75px;*/
  243. /*animation: rotate 4s infinite linear;*/
  244. margin: 0px;
  245. padding: 0px;
  246. }
  247.   
  248. /*Neptune*/
  249. .neptune {
  250. left:10px;
  251. top:390px;
  252. height: 20px;
  253. width: 20px;
  254. background-color: rgb(133,136,180);
  255. border-radius: 50%;
  256. position: absolute;
  257. transform-origin: 390px 10px;
  258. animation: rotate 1028.76s infinite linear;
  259. }
  260.   
  261. /* Orbit of Neptune */
  262. .neptuneOrbit {
  263. left:20px;
  264. top:20px;
  265. height: 760px;
  266. width: 760px;
  267. background-color: transparent;
  268. border-radius: 50%;
  269. border-style: dashed;
  270. border-color: gray;
  271. position: absolute;
  272. border-width: 1px;
  273. /*margin: 100px;*/
  274. /*transform-origin: -75px -75px;*/
  275. /*animation: rotate 4s infinite linear;*/
  276. margin: 0px;
  277. padding: 0px;
  278. }
  279.   
  280. @keyframes rotate {
  281. 100% {
  282. transform: rotate(-360deg);
  283. }
  284. }
  285.   
  286.      </ style >   
  287.   
  288. </ head >   
  289. < body >   
  290.      < div   class = "solarsys" >   
  291.          <!--Sun-->   
  292.          < div   class = 'sun' > </ div >   
  293.   
  294.          <!--Mercury Orbit-->   
  295.          < div   class = 'mercuryOrbit' > </ div >   
  296.   
  297.          <!--Mercury-->   
  298.          < div   class = 'mercury' > </ div >   
  299.   
  300.          <!--Venus Orbit-->   
  301.          < div   class = 'venusOrbit' > </ div >   
  302.   
  303.          <!--Venus-->   
  304.          < div   class = 'venus' > </ div >   
  305.   
  306.          <!--Earth Orbit-->   
  307.          < div   class = 'earthOrbit' > </ div >   
  308.   
  309.          <!--Earth-->   
  310.          < div   class = 'earth' > </ div >   
  311.   
  312.          <!--Mars Orbit-->   
  313.          < div   class = 'marsOrbit' > </ div >   
  314.   
  315.          <!--Mars-->   
  316.          < div   class = 'mars' > </ div >   
  317.   
  318.          <!--Jupiter Orbit-->   
  319.          < div   class = 'jupiterOrbit' > </ div >   
  320.   
  321.          <!--Jupiter-->   
  322.          < div   class = 'jupiter' > </ div >   
  323.   
  324.          <!--Saturn Orbit-->   
  325.          < div   class = 'saturnOrbit' > </ div >   
  326.   
  327.          <!--Saturn-->   
  328.          < div   class = 'saturn' > </ div >   
  329.   
  330.          <!--Uranus Orbit-->   
  331.          < div   class = 'uranusOrbit' > </ div >   
  332.   
  333.          <!--Uranus-->   
  334.          < div   class = 'uranus' > </ div >   
  335.   
  336.          <!--Neptune's Orbit-->   
  337.          < div   class = 'neptuneOrbit' > </ div >   
  338.   
  339.          <!--Neptune-->   
  340.          < div   class = 'neptune' > </ div >   
  341.      </ div >   
  342. </ body >   
  343. </ html >   

The above html+css3 code to implement the animation effect of the solar system planets is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  If I change a property randomly in Vue data, will the view be updated?

>>:  Specific use of MySQL internal temporary tables

Recommend

Several ways to manually implement HMR in webpack

Table of contents 1. Introduction 2. GitHub 3. Ba...

MySQL 8.0.14 installation and configuration method graphic tutorial

This article records the installation and configu...

CSS to achieve the transition animation effect of the picture when the mouse is placed on it

Code <div class="test"> <div&g...

Configure selenium environment based on linux and implement operation

1. Using Selenium in Linux 1. Install Chrome Inst...

Mysql transaction concurrency problem solution

I encountered such a problem during development A...

How to implement import and export mysql database commands under linux

1. Export the database using the mysqldump comman...

The Chinese garbled characters in HTML files and the display problems in browsers

My page today also had garbled characters, so I s...

Differences between Windows Server win2003, win2008R2, win2012, win2016, and win2019 system versions

Recently, Microsoft released the 2019 server syst...

SQL left join and right join principle and example analysis

There are two tables, and the records in table A ...

Detailed analysis of the parameter file my.cnf of MySQL in Ubuntu

Preface Based on my understanding of MySQL, I thi...

Implementation of installing Docker in win10 environment

1. Enter the Docker official website First, go to...

Can MySQL's repeatable read level solve phantom reads?

introduction When I was learning more about datab...

Quick solution for forgetting MySQL8 password

Preface When we forget the MySQL database passwor...

Eight examples of how Vue implements component communication

Table of contents 1. Props parent component ---&g...

A brief analysis of the event delegation mechanism and deep and shallow copying in JavaScript

Table of contents 1. Event delegation Event Bubbl...