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

How to deploy Go web applications using Docker

Table of contents Why do we need Docker? Docker d...

How to make if judgment in js as smooth as silk

Table of contents Preface Code Implementation Ide...

How to draw a vertical line between two div tags in HTML

Recently, when I was drawing an interface, I enco...

Detailed tutorial on using the tomcat8-maven-plugin plugin in Maven

I searched a lot of articles online but didn'...

Optimizing query speed of MySQL with tens of millions of data using indexes

1. The role of index Generally speaking, an index...

Detailed explanation of Vue project optimization and packaging

Table of contents Preface 1. Routing lazy loading...

How to create a new user in CentOS and enable key login

Table of contents Create a new user Authorize new...

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles After going around in ...

Solution to Linux not supporting all commands

What should I do if Linux does not support all co...

MySQL select results to perform update example tutorial

1. Single table query -> update UPDATE table_n...

How to transfer files between Windows and Linux

File transfer between Windows and Linux (1) Use W...

HTML structured implementation method

DIV+css structure Are you learning CSS layout? Sti...

Tutorial on installing Apache 2.4.41 on Windows 10

1. Apache 2.4.41 installation and configuration T...

JavaScript example code to determine whether a file exists

1. Business Scenario I have been doing developmen...

How to start a Vue.js project

Table of contents 1. Node.js and Vue 2. Run the f...