eclipse-Animation
Lektion 9 von 10 im Kurs Sonnenfinsternis-Animation | HTML/CSS Projekt von Coddy.
Aufgabe
EinfachErstellen Sie in der CSS-Datei eine Animation mit @keyframes:
- Benennen Sie die Animation "eclipse-animation".
- Fügen Sie drei Keyframe-Selektoren hinzu:
0%,50%und100%. Fügen Sie CSS-Styles im 0% Keyframe-Selektor hinzu:
1. Setzen Sie box-shadow auf
none.2. Setzen Sie transform auf
translate(-30px, 30px) scale(0.9).Fügen Sie CSS-Styles im 50% Keyframe-Selektor hinzu:
1. Setzen Sie transform auf
translate(0px, 0px) scale(1.02).2. Setzen Sie box-shadow auf
0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.3. Setzen Sie background-color auf
#efdbd8.Fügen Sie CSS-Styles im 100% Keyframe-Selektor hinzu:
1. Setzen Sie transform auf
translate(30px, -30px) scale(0.9).2. Setzen Sie box-shadow auf
none.
Wenn Sie sich nicht sicher sind, schauen Sie in den Hinweis. Nach diesem Schritt werden Sie sehen, wie sich der Mond bewegt!
Wenn er sich nicht bewegt - schauen Sie in die Lösung...
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>