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

Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS

Das Filterattribut definiert die visuelle Wirkung...

Flammenanimation mit CSS3 umgesetzt

Ergebnisse erzielen Implementierungscode html <...

js, um einen einfachen Bild-Drag-Effekt zu erzielen

In diesem Artikel wird der spezifische Code von j...

Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten

Inhaltsverzeichnis 1. So erhalten Sie unterschied...

Detaillierte Beschreibung des Anwendungsszenarios für Javascript-Closure

Inhaltsverzeichnis 1. Abschluss 2. Szenarien für ...

So verwenden Sie einen Docker-Container für den Zugriff auf das Host-Netzwerk

Vor Kurzem wurde ein System bereitgestellt, das n...

Methoden zum Defragmentieren und Freigeben von Speicherplatz in MySQL-Tabellen

Inhaltsverzeichnis Ursachen der MySQL-Tabellenfra...

So zeigen Sie den Rahmen an, wenn td leer ist

Zuvor habe ich zusammengefasst, wie man mit CSS di...

So installieren und implementieren Sie Zabbix 5.0 für Nginx

Inhaltsverzeichnis Experimentelle Umgebung Instal...

Detaillierte Erklärung zur Verwendung selbstverschachtelter Vue-Baumkomponenten

In diesem Artikel erfahren Sie, wie Sie die selbs...

Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung

Hintergrund Kürzlich habe ich während eines Onlin...

Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung

app.js: Startdatei oder Einstiegsdatei package.js...

Mehrere CSS3-Tag-Abkürzungen (empfohlen)

border-radius: CSS3 abgerundete Ecken Syntax: bor...

Was Sie über Responsive Design wissen müssen

Responsive Design bedeutet, während des Website-E...

Drei Möglichkeiten zur Kommunikation zwischen Docker-Containern

Wir alle wissen, dass Docker-Container voneinande...