Reise nach Westen

Einführung

In diesem Projekt lernst du, wie du eine animierte Sequenz mit CSS erstellst. Das Projekt basiert auf der Geschichte einer Gruppe von Jüngern, die auf eine Pilgerreise nach Westen machen, um Buddhaische Schriften zu suchen. Sie wurden jedoch mitten auf dem Weg von Dämonen blockiert, und ein Charakter namens Tom hat CSS genutzt, um sie zu retten und den Jüngern zu ermöglichen, ihre Reise nach Westen fortzusetzen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Animationsrahmen für die Charaktere in der Szene einrichtest
• Wie du die Animationsschlüsselbilder für jeden Charakter definierst, um die Illusion der Bewegung zu erzeugen
• Wie du die Animationen unendlich oft wiederholen lässt, um eine kontinuierliche, nahtlose Animation zu erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• CSS-Animationen zur Erzeugung dynamischer und ansprechender visueller Effekte zu nutzen
• Mehrere Animationen zu koordinieren, um eine zusammenhängende, synchronisierte Animationssequenz zu erstellen
• Animationen für Leistung und Reaktionsfähigkeit zu optimieren

Skills Graph

Projektstruktur einrichten

Um loszulegen, öffne die Experimentierumgebung, und die Verzeichnisstruktur ist wie folgt:

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

Dabei gilt:

• index.html ist die Hauptseite.
• images ist der Bilderordner.
• css ist der CSS-Ordner.

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

Wenn du die index.html-Seite im Browser vorschau, wirst du bemerken, dass die Animation nur einmal abgespielt und dann stoppt. Die Seiteneffekte sind wie folgt:

Animationsrahmen einrichten

In diesem Schritt lernst du, wie du die Animationsrahmen für die Charaktere im Projekt "Reise nach Westen" einrichtest.

1. Öffne die Datei css/style.css im Code-Editor und du wirst sehen, dass a1, a2, a3, a4 die vier @keyframes-Regeln sind, die bereits gegeben wurden, und dass die @keyframes-Regel die Animationssequenz definiert. Diese Schlüsselbilder definieren die Animation für jeden Charakter, indem sie das Hintergrundbild horizontal verschieben, um die Illusion der Bewegung zu erzeugen.
2. In der .actor:first-child-Regel ändere den Code wie folgt, um die Animation des ersten Charakters zu starten:

animation: a1 0.8s steps(8) infinite;

Dadurch wird die Animation des ersten Charakters unendlich oft wiederholt, wobei jeder Frame 0,8 Sekunden dauert und die Animation 8 Schritte hat.

3. In der .actor:nth-child(2)-Regel ändere den Code wie folgt, um die Animation des zweiten Charakters zu starten:

animation: a2 0.8s steps(8) infinite;

Dadurch wird die Animation des zweiten Charakters unendlich oft wiederholt, wobei jeder Frame 0,8 Sekunden dauert und die Animation 8 Schritte hat.

4. In der .actor:nth-child(3)-Regel ändere den Code wie folgt, um die Animation des dritten Charakters zu starten:

animation: a3 0.8s steps(8) infinite;

Dadurch wird die Animation des dritten Charakters unendlich oft wiederholt, wobei jeder Frame 0,8 Sekunden dauert und die Animation 8 Schritte hat.

5. In der .actor:last-child-Regel ändere den Code wie folgt, um die Animation des vierten Charakters zu starten:

animation: a4 0.8s steps(8) infinite;

Dadurch wird die Animation des vierten Charakters unendlich oft wiederholt, wobei jeder Frame 0,8 Sekunden dauert und die Animation 8 Schritte hat.

6. Speichere die Datei style.css.

Jetzt sollte die Vorschau der index.html-Datei im Browser die unendliche Wiederholung der Charakteranimationen zeigen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.