Erstellen einer Animation der Erdumlaufbahn mit CSS

Einführung

In diesem Projekt lernen Sie, wie Sie eine CSS-Animation erstellen, die die Umlaufbahn der Erde um die Sonne simuliert. Dieses Projekt hilft Ihnen, die Konzepte von CSS-Animationen zu verstehen und wie Sie sie anwenden können, um eine dynamische und optisch ansprechende Web-Erfahrung zu schaffen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie die Animation für das .earth-con-Element einrichten
• Wie Sie die @keyframes für die orbit-Animation verwenden, um die Rotation der Erde um das Zentrum zu erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

• Eine CSS-Animation erstellen, die die Umlaufbahn der Erde um die Sonne simuliert
• Die Konzepte von CSS-Animationen verstehen und wissen, wie Sie sie anwenden können, um dynamische und optisch ansprechende Web-Erfahrungen zu schaffen
• Mehrere CSS-Eigenschaften koordinieren, um den gewünschten Animations-Effekt zu erzielen

Projektstruktur einrichten

Um loszulegen, öffnen Sie die Experimentierumgebung. Die Verzeichnisstruktur sieht wie folgt aus:

├── css
│   └── style.css
└── index.html

Hierbei gilt:

• index.html ist die Hauptseite.
• css/style.css ist die CSS-Datei, in der Sie Code hinzufügen müssen.

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Öffnen Sie als Nächstes "Web 8080" oben auf der VM und aktualisieren Sie die Seite manuell, um den folgenden Effekt in Ihrem Browser zu sehen:

Animation einrichten

In diesem Schritt lernen Sie, wie Sie die Animation für das .earth-con-Element in der Datei css/style.css hinzufügen.

1. Öffnen Sie die Datei css/style.css im Code-Editor. Scrollen Sie ans Ende des Codes und Sie werden feststellen, dass orbit die bereits vorgegebene @keyframes-Regel ist. Diese @keyframes-Regel definiert die Animationssequenz.

2. Suchen Sie die .earth-con-Klasse in der CSS-Datei.

3. Fügen Sie innerhalb der .earth-con-Klasse die folgenden CSS-Eigenschaften hinzu, um die Animation zu definieren:

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

Dadurch wird das .earth-con-Element um das Zentrum des Bildschirms rotieren und so die Umlaufbahn der Erde um die Sonne simulieren.

4. Speichern Sie die Datei style.css.
5. Kehren Sie zu Ihrem Browser zurück und aktualisieren Sie die Seite. Sie sollten den folgenden Effekt sehen:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.