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 use Element in React project

This is my first time using the element framework...

jenkins+gitlab+nginx deployment of front-end application

Table of contents Related dependency installation...

How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing

Related Documents Part of this article is referen...

Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)

MySQL official website: https://www.mysql.com/dow...

Should I use distinct or group by to remove duplicates in MySQL?

Preface About the performance comparison between ...

What are the similarities between the development of web design and western architecture?

History always repeats itself surprisingly well. ...

Perfect solution for theme switching based on Css Variable (recommended)

When receiving this requirement, Baidu found many...

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Preview address: https://ovsexia.gitee.io/leftfix...

Recommend 60 paging cases and good practices

<br />Structure and hierarchy reduce complex...

Introduction to the use of html base tag target=_parent

The <base> tag specifies the default address...

How to configure NAS on Windows Server 2019

Preface This tutorial installs the latest version...

Several ways to encapsulate axios in Vue

Table of contents Basic Edition Step 1: Configure...

Three uses and differences of MySQL not equal

Judgment symbols are often used in MySQL, and not...

Install Docker on Centos7 (2020 latest version available, just copy and paste)

Refer to the official documentation here for oper...

Detailed explanation of using pt-heartbeat to monitor MySQL replication delay

pt-heartbeat When the database is replicated betw...