animacja zaćmienia

Lekcja 9 z 10 w kursie Animacja zaćmienia Słońca | Projekt HTML/CSS w Coddy.

Wyzwanie

Łatwy

W pliku CSS utwórz animację za pomocą @keyframes:

Nazwij animację "eclipse-animation".
Dodaj trzy selektory klatek kluczowych: 0% , 50% i 100%.
Dodaj style CSS w selektorze klatek kluczowych 0%:
1. Ustaw box-shadow na none.
2. Ustaw transform na translate(-30px, 30px) scale(0.9).
Dodaj style CSS w selektorze klatek kluczowych 50%:
1. Ustaw transform na translate(0px, 0px) scale(1.02).
2. Ustaw box-shadow na 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Ustaw background-color na #efdbd8.
Dodaj style CSS w selektorze klatek kluczowych 100%:
1. Ustaw transform na translate(30px, -30px) scale(0.9).
2. Ustaw box-shadow na none.

Jeśli nie masz pewności, zajrzyj do podpowiedzi. Po tym kroku zobaczysz, jak porusza się księżyc!

Jeśli się nie porusza — zajrzyj do rozwiązania…

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>