HTML+CSS3-Code zur Realisierung des Animationseffekts der Planeten des Sonnensystems

HTML+CSS3-Code zur Realisierung des Animationseffekts der Planeten des Sonnensystems

Erstellen Sie eine Animation der acht Planeten des Sonnensystems, mit Ausnahme ihrer Satelliten. Alle Planeten drehen sich um die Sonne. Die Planeten sind einfarbig und drehen sich vorerst nicht.

Effekt statisches Bild:

Die Animation umfasst: die Sonne und die Planeten, ihre Umlaufbahnen und eine Animation der Planetenumdrehungen.

Zeichnen Sie zunächst eine Skizze, entwerfen Sie Größe und Position und berechnen Sie die Ausführungszeit der Animation basierend auf der Umlaufzeit.

Die Struktur von HTML:

Ein Div mit der Klasse Solarsys als Containerelement des Sonnensystems. Die Position dieses Div ist relativ.

Sowohl Planetenbahnen als auch Planeten verwenden div und die Position ist absolut.

Der Container verwendet relative und die internen Elemente verwenden absolute Positionierung, wodurch der Effekt relativ einfach zu erzielen ist. Der Nachteil besteht darin, dass die Größe festgelegt ist.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   Klasse = "Solarsys" >   
  2.          <!--So-->   
  3.          < div   Klasse = "Sonne" > </ div >   
  4.   
  5.          <!--Merkurumlaufbahn-->   
  6.          < div   Klasse = "mercuryOrbit" > </ div >   
  7.   
  8.          <!--Merkur-->   
  9.          < div   Klasse = "Merkur" > </ div >   
  10.   
  11.          <!--Venusumlaufbahn-->   
  12.          < div   Klasse = "venusOrbit" > </ div >   
  13.   
  14.          <!--Venus-->   
  15.          < div   Klasse = "Venus" > </ div >   
  16.   
  17.          <!--Erdumlaufbahn-->   
  18.          < div   Klasse = "earthOrbit" > </ div >   
  19.   
  20.          <!--Erde-->   
  21.          < div   Klasse = "Erde" > </ div >   
  22.   
  23.          <!--Marsumlaufbahn-->   
  24.          < div   Klasse = "marsOrbit" > </ div >   
  25.   
  26.          <!--Mars-->   
  27.          < div   Klasse = "Mars" > </ div >   
  28.   
  29.          <!--Jupiter-Umlaufbahn-->   
  30.          < div   Klasse = "JupiterOrbit" > </ div >   
  31.   
  32.          <!--Jupiter-->   
  33.          < div   Klasse = "Jupiter" > </ div >   
  34.   
  35.          <!--Saturnumlaufbahn-->   
  36.          < div   Klasse = "SaturnOrbit" > </ div >   
  37.   
  38.          <!--Saturn-->   
  39.          < div   Klasse = "Saturn" > </ div >   
  40.   
  41.          <!--Uranus-Umlaufbahn-->   
  42.          < div   Klasse = "uranusOrbit" > </ div >   
  43.   
  44.          <!--Uranus-->   
  45.          < div   Klasse = "Uranus" > </ div >   
  46.   
  47.          <!--Neptuns Umlaufbahn-->   
  48.          < div   Klasse = "neptuneOrbit" > </ div >   
  49.   
  50.          <!--Neptun-->   
  51.          < div   Klasse = "Neptun" > </ div >   
  52.      </div>​​   

CSS des Solarsystem-Container-Div:

Feste Breite, feste Höhe, relative Positionierung und zentrierte Ausrichtung innerhalb der Seite.

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .solarsys{
  2.              Breite : 800px ;
  3.              Höhe : 800px ;;
  4.              Position : relativ ;
  5.              Rand : 0 automatisch ;
  6.              Hintergrundfarbe : #000000 ;
  7.              Polsterung : 0;
  8. transformieren: Skalierung(1);
  9. }

CSS für das Sonnen-Div:

Stellen Sie Breite, Höhe sowie die linke und obere Ecke entsprechend der Größe und Position des Designs ein.

Stellen Sie die Farbe ein.

Durch eine Vergrößerung des Rahmenradius um 50 % können wir aus einem Quadrat einen Kreis machen.

Der Sonnenschein wird durch die 4-stufige Farbeinstellung von Box-Shadow erreicht.

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .Sonne {
  2.              links : 357px ;
  3.              oben : 357px ;
  4.              Höhe : 90px ;
  5.              Breite : 90px ;
  6.              Hintergrundfarbe : RGB (248,107,35);
  7.              Randradius : 50 %;
  8. Kastenschatten: 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 : absolut ;
  10.              Rand : 0;
  11. }

CSS für das Planetenumlaufbahn-Div:

Nehmen Sie die Umlaufbahn des Merkur an.

Stellen Sie Breite, Höhe sowie die linke und obere Ecke entsprechend der Größe und Position des Designs ein.

Die Hintergrundfarbe ist transparent.

Durch eine Vergrößerung des Rahmenradius um 50 % können wir aus einem Quadrat einen Kreis machen.

Der Rahmentyp ist auf eine gepunktete Linie eingestellt.

Die Farbe des Rahmens ist auf Grau eingestellt.

Setzen Sie die Breite auf 1.

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .mercuryOrbit {
  2.              links : 342,5px ;
  3.              oben : 342,5px ;
  4.              Höhe : 115px ;
  5.              Breite : 115px ;
  6.              Hintergrundfarbe : transparent ;
  7.              Randradius : 50 %;
  8.              Rahmenstil : gestrichelt ;
  9.              Rahmenfarbe : grau ;
  10.              Position : absolut ;
  11.              Rahmenbreite : 1px ;
  12.              Rand : 0px ;
  13.              Polsterung : 0px ;
  14. }

CSS für das Planet-Div:

Nehmen wir an, es ist Merkur.

Stellen Sie Breite, Höhe sowie die linke und obere Ecke entsprechend der Größe und Position des Designs ein.

Stellen Sie die Farbe ein.

Durch eine Vergrößerung des Rahmenradius um 50 % können wir aus einem Quadrat einen Kreis machen.

Setzen Sie den Transfrom-Origin-Wert auf den horizontalen und vertikalen Versatz der oberen linken Ecke des aktuellen Divs relativ zum Mittelpunkt des gesamten Solarsystem-Containers. Nach dem Hinzufügen der Rotationsanimation ist der Effekt eine Rotation um den Mittelpunkt.

Erstellen Sie eine Animation, verweisen Sie auf die rotierende Keyframe-Animation und führen Sie sie endlos linear aus. Die Ausführungszeit wird hier basierend auf der Umlaufzeit des Planeten berechnet.

CSS- CodeInhalt in die Zwischenablage kopieren
  1. .Quecksilber {
  2.              links : 337,5px ;
  3.              oben : 395px ;
  4.              Höhe : 10px ;
  5.              Breite : 10px ;
  6.              Hintergrundfarbe : RGB (166,138,56);
  7.              Randradius : 50 %;
  8.              Position : absolut ;
  9. Transform-Ursprung: 62,5px   5px ;
  10. Animation: 1,5 s unendlich linear drehen;
  11. }

Keyframe-Animation drehen:

Gegen den Uhrzeigersinn drehen.

CSS- CodeInhalt in die Zwischenablage kopieren
  1. @keyframes drehen {
  2. 100 % {
  3. transformieren: drehen (-360 Grad);
  4. }
  5. }

Die Grundstruktur ist fertig.

Nur in Chrom getestet.

Vollständiger Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2. <Kopf>​​   
  3.      < Stil >   
  4. .solarsys{
  5. Breite: 800px;
  6. Höhe: 800px;;
  7. Position: relativ;
  8. Rand: 0 automatisch;
  9. Hintergrundfarbe: #000000;
  10. Polsterung: 0;
  11. transformieren: Skalierung(1);
  12. }
  13.   
  14. /*Sonne*/
  15. .Sonne {
  16. links: 357px;
  17. oben: 357px;
  18. Höhe: 90px;
  19. Breite: 90px;
  20. Hintergrundfarbe: rgb(248,107,35);
  21. Randradius: 50 %;
  22. Kastenschatten: 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: absolut;
  24. Rand: 0;
  25. }
  26.   
  27. /*Quecksilber*/
  28. .Quecksilber {
  29. links: 337,5px;
  30. oben: 395px;
  31. Höhe: 10px;
  32. Breite: 10px;
  33. Hintergrundfarbe: rgb(166,138,56);
  34. Randradius: 50 %;
  35. Position: absolut;
  36. Transform-Ursprung: 62,5px 5px;
  37. Animation: 1,5 s unendlich linear drehen;
  38. }
  39.   
  40. /* Merkur-Umlaufbahn */
  41. .mercuryOrbit {
  42. links: 342,5px;
  43. oben: 342,5px;
  44. Höhe: 115px;
  45. Breite: 115px;
  46. Hintergrundfarbe: transparent;
  47. Randradius: 50 %;
  48. Rahmenstil: gestrichelt;
  49. Rahmenfarbe: grau;
  50. Position: absolut;
  51. Rahmenbreite: 1px;
  52. Rand: 0px;
  53. Polsterung: 0px;
  54. }
  55.   
  56. /*Venus*/
  57. .venus {
  58. links: 309px;
  59. oben: 389px;
  60. Höhe: 22px;
  61. Breite: 22px;
  62. Hintergrundfarbe: rgb(246,157,97);
  63. Randradius: 50 %;
  64. Position: absolut;
  65. Transform-Ursprung: 91px 11px;
  66. Animation: Drehung 3,84 s unendlich linear;
  67. }
  68.   
  69. /* Umlaufbahn der Venus */
  70. .venusOrbit {
  71. links: 320px;
  72. oben: 320px;
  73. Höhe: 160px;
  74. Breite: 160px;
  75. Hintergrundfarbe: transparent;
  76. Randradius: 50 %;
  77. Rahmenstil: gestrichelt;
  78. Rahmenfarbe: grau;
  79. Position: absolut;
  80. Rahmenbreite: 1px;
  81. /*Rand: 100px;*/
  82. /*Transform-Origin: -75px -75px;*/
  83. /*Animation: 4 s unendlich linear drehen;*/
  84. Rand: 0px;
  85. Polsterung: 0px;
  86. }
  87.   
  88. /*Erde*/
  89. .Erde {
  90. links: 266,5px;
  91. oben: 391px;
  92. Höhe: 18px;
  93. Breite: 18px;
  94. Hintergrundfarbe: RGB (115,114,174);
  95. Randradius: 50 %;
  96. Position: absolut;
  97. Transform-Ursprung: 134px 9px;
  98. Animation: 6,25 s unendlich linear drehen;
  99. }
  100.   
  101. /*Erdumlaufbahn*/
  102. .earthOrbit {
  103. links: 275px;
  104. oben: 275px;
  105. Höhe: 250px;
  106. Breite: 250px;
  107. Hintergrundfarbe: transparent;
  108. Randradius: 50 %;
  109. Rahmenstil: gestrichelt;
  110. Rahmenfarbe: grau;
  111. Position: absolut;
  112. Rahmenbreite: 1px;
  113. /*Rand: 100px;*/
  114. /*Transform-Origin: -75px -75px;*/
  115. /*Animation: 4 s unendlich linear drehen;*/
  116. Rand: 0px;
  117. Polsterung: 0px;
  118. }
  119.   
  120. /*Mars*/
  121. .mars {
  122. links: 222,5px;
  123. oben: 392,5px;
  124. Höhe: 15px;
  125. Breite: 15px;
  126. Hintergrundfarbe: rgb(140,119,63);
  127. Randradius: 50 %;
  128. Position: absolut;
  129. Transform-Ursprung: 177,5px 7,5px;
  130. Animation: Drehung 11,75 s unendlich linear;
  131. }
  132.   
  133. /*Marsumlaufbahn*/
  134. .marsOrbit {
  135. links: 230px;
  136. oben: 230px;
  137. Höhe: 340px;
  138. Breite: 340px;
  139. Hintergrundfarbe: transparent;
  140. Randradius: 50 %;
  141. Rahmenstil: gestrichelt;
  142. Rahmenfarbe: grau;
  143. Position: absolut;
  144. Rahmenbreite: 1px;
  145. /*Rand: 100px;*/
  146. /*Transform-Ursprung: -75px -75px;*/
  147. /*Animation: 4 s unendlich linear drehen;*/
  148. Rand: 0px;
  149. Polsterung: 0px;
  150. }
  151.   
  152. /*Jupiter*/
  153. .jupiter {
  154. links: 134px;
  155. oben: 379px;
  156. Höhe: 42px;
  157. Breite: 42px;
  158. Hintergrundfarbe: RGB (156,164,143);
  159. Randradius: 50 %;
  160. Position: absolut;
  161. Transform-Ursprung: 266px 21px;
  162. Animation: Drehung 74,04 s unendlich linear;
  163. }
  164.   
  165. /*Jupiterumlaufbahn*/
  166. .jupiterOrbit {
  167. links: 155px;
  168. oben: 155px;
  169. Höhe: 490px;
  170. Breite: 490px;
  171. Hintergrundfarbe: transparent;
  172. Randradius: 50 %;
  173. Rahmenstil: gestrichelt;
  174. Rahmenfarbe: grau;
  175. Position: absolut;
  176. Rahmenbreite: 1px;
  177. /*Rand: 100px;*/
  178. /*Transform-Ursprung: -75px -75px;*/
  179. /*Animation: 4 s unendlich linear drehen;*/
  180. Rand: 0px;
  181. Polsterung: 0px;
  182. }
  183.   
  184. /*Saturn*/
  185. .saturn {
  186. links: 92px;
  187. oben: 387px;
  188. Höhe: 26px;
  189. Breite: 26px;
  190. Hintergrundfarbe: rgb(215,171,68);
  191. Randradius: 50 %;
  192. Position: absolut;
  193. Transform-Ursprung: 308px 13px;
  194. Animation: Drehung 183,92 s unendlich linear;
  195. }
  196.   
  197. /*Saturnumlaufbahn*/
  198. .saturnOrbit {
  199. links: 105px;
  200. oben: 105px;
  201. Höhe: 590px;
  202. Breite: 590px;
  203. Hintergrundfarbe: transparent;
  204. Randradius: 50 %;
  205. Rahmenstil: gestrichelt;
  206. Rahmenfarbe: grau;
  207. Position: absolut;
  208. Rahmenbreite: 1px;
  209. /*Rand: 100px;*/
  210. /*Transform-Ursprung: -75px -75px;*/
  211. /*Animation: 4 s unendlich linear drehen;*/
  212. Rand: 0px;
  213. Polsterung: 0px;
  214. }
  215.   
  216. /*Uranus*/
  217. .uranus {
  218. links: 41,5px;
  219. oben: 386,5px;
  220. Höhe: 27px;
  221. Breite: 27px;
  222. Hintergrundfarbe: RGB (164,192,206);
  223. Randradius: 50 %;
  224. Position: absolut;
  225. Transform-Ursprung: 358,5px 13,5px;
  226. Animation: 524,46 s unendlich linear rotieren;
  227. }
  228.   
  229. /* Umlaufbahn des Uranus */
  230. .uranusOrbit {
  231. links: 55px;
  232. oben: 55px;
  233. Höhe: 690px;
  234. Breite: 690px;
  235. Hintergrundfarbe: transparent;
  236. Randradius: 50 %;
  237. Rahmenstil: gestrichelt;
  238. Rahmenfarbe: grau;
  239. Position: absolut;
  240. Rahmenbreite: 1px;
  241. /*Rand: 100px;*/
  242. /*Transform-Ursprung: -75px -75px;*/
  243. /*Animation: 4 s unendlich linear drehen;*/
  244. Rand: 0px;
  245. Polsterung: 0px;
  246. }
  247.   
  248. /*Neptun*/
  249. .neptun {
  250. links: 10px;
  251. oben: 390px;
  252. Höhe: 20px;
  253. Breite: 20px;
  254. Hintergrundfarbe: RGB (133,136,180);
  255. Randradius: 50 %;
  256. Position: absolut;
  257. Transform-Ursprung: 390px 10px;
  258. Animation: 1028,76 s unendlich linear rotieren;
  259. }
  260.   
  261. /* Umlaufbahn des Neptuns */
  262. .neptuneOrbit {
  263. links: 20px;
  264. oben: 20px;
  265. Höhe: 760px;
  266. Breite: 760px;
  267. Hintergrundfarbe: transparent;
  268. Randradius: 50 %;
  269. Rahmenstil: gestrichelt;
  270. Rahmenfarbe: grau;
  271. Position: absolut;
  272. Rahmenbreite: 1px;
  273. /*Rand: 100px;*/
  274. /*Transform-Origin: -75px -75px;*/
  275. /*Animation: 4 s unendlich linear drehen;*/
  276. Rand: 0px;
  277. Polsterung: 0px;
  278. }
  279.   
  280. @keyframes drehen {
  281. 100 % {
  282. transformieren: drehen (-360 Grad);
  283. }
  284. }
  285.   
  286.      </ Stil >   
  287.   
  288. </ Kopf >   
  289. < Textkörper >   
  290.      < div   Klasse = "Solarsys" >   
  291.          <!--So-->   
  292.          < div   Klasse = "Sonne" > </ div >   
  293.   
  294.          <!--Merkurumlaufbahn-->   
  295.          < div   Klasse = "mercuryOrbit" > </ div >   
  296.   
  297.          <!--Merkur-->   
  298.          < div   Klasse = "Merkur" > </ div >   
  299.   
  300.          <!--Venusumlaufbahn-->   
  301.          < div   Klasse = "venusOrbit" > </ div >   
  302.   
  303.          <!--Venus-->   
  304.          < div   Klasse = "Venus" > </ div >   
  305.   
  306.          <!--Erdumlaufbahn-->   
  307.          < div   Klasse = "earthOrbit" > </ div >   
  308.   
  309.          <!--Erde-->   
  310.          < div   Klasse = "Erde" > </ div >   
  311.   
  312.          <!--Marsumlaufbahn-->   
  313.          < div   Klasse = "marsOrbit" > </ div >   
  314.   
  315.          <!--Mars-->   
  316.          < div   Klasse = "Mars" > </ div >   
  317.   
  318.          <!--Jupiter-Umlaufbahn-->   
  319.          < div   Klasse = "JupiterOrbit" > </ div >   
  320.   
  321.          <!--Jupiter-->   
  322.          < div   Klasse = "Jupiter" > </ div >   
  323.   
  324.          <!--Saturnumlaufbahn-->   
  325.          < div   Klasse = "SaturnOrbit" > </ div >   
  326.   
  327.          <!--Saturn-->   
  328.          < div   Klasse = "Saturn" > </ div >   
  329.   
  330.          <!--Uranus-Umlaufbahn-->   
  331.          < div   Klasse = "uranusOrbit" > </ div >   
  332.   
  333.          <!--Uranus-->   
  334.          < div   Klasse = "Uranus" > </ div >   
  335.   
  336.          <!--Neptuns Umlaufbahn-->   
  337.          < div   Klasse = "neptuneOrbit" > </ div >   
  338.   
  339.          <!--Neptun-->   
  340.          < div   Klasse = "Neptun" > </ div >   
  341.      </div>​​   
  342. </ Körper >   
  343. </ html >   

Der obige HTML+CSS3-Code zur Implementierung des Animationseffekts der Planeten des Sonnensystems ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<:  Wenn ich eine Eigenschaft in Vue-Daten zufällig ändere, wird die Ansicht aktualisiert?

>>:  So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Artikel empfehlen

Unterschied zwischen varchar- und char-Typen in MySQL

Inhaltsverzeichnis vorgenannt VARCHAR-Typ VARCHAR...

Detaillierte Erklärung des Fehlers bei der Verwendung des Element-ui NavMenu-Untermenüs zur rekursiven Generierung

Wenn das Untermenü der Navigationsleiste rekursiv...

MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails

MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...

Details zu MySQL-Zeittypen und -Modi

Inhaltsverzeichnis 1. MySQL-Zeittyp 2. Überprüfen...

Implementierung von Nginx-Weiterleitungsübereinstimmungsregeln

1. Regulärer Ausdrucksabgleich ~ für Groß- und Kl...

Studiennotizen zur MySQL Master-Slave-Konfiguration

● Ich hatte vor, einige Cloud-Daten zu kaufen, um...

Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten, wenn der Text zu lang ist

1. Der CSS-Stil löst das Problem der Anzeige von ...

Hinweise zum erweiterten Zeichengerätetreiber des Linux-Kernel-Gerätetreibers

/****************** * Erweiterter Zeichengerätetr...

Lösen Sie das Problem, dass ifconfig und addr die IP-Adresse in Linux nicht sehen können

1. Installieren Sie das Linux-System auf der virt...

Eine kurze Diskussion über das Prinzip der bidirektionalen Datenbindung von React

Inhaltsverzeichnis Was ist bidirektionale Datenbi...

Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

Inhaltsverzeichnis Überblick Hash-Eigenschaften G...

So handhaben Sie gleichzeitige Aktualisierungen von MySQL-Daten

Wird UPDATE gesperrt? Wird die SQL-Anweisung gesp...

Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern

Inhaltsverzeichnis Axios-Anfrage Qs-Verarbeitungs...

Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5

1. Rz auf den Server hochladen und entpacken rz [...

Detaillierte Erläuterung der MySQL 8.0-Wörterbuchtabellenerweiterung

Das Datenwörterbuch in MySQL ist eine der wichtig...