Animation eclipse

Leçon 9 sur 10 du cours Animation d'éclipse solaire | Projet HTML/CSS de Coddy.

Défi

Facile

Dans le fichier CSS, créez une animation en utilisant @keyframes :

Nommez l'animation "eclipse-animation".
Ajoutez trois sélecteurs d'étapes clés (keyframes-selector) qui sont 0% , 50% et 100%.
Ajoutez des styles CSS dans le sélecteur d'étape 0% :
1. Définissez box-shadow sur none.
2. Définissez transform sur translate(-30px, 30px) scale(0.9).
Ajoutez des styles CSS dans le sélecteur d'étape 50% :
1. Définissez transform sur translate(0px, 0px) scale(1.02).
2. Définissez box-shadow sur 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Définissez background-color sur #efdbd8.
Ajoutez des styles CSS dans le sélecteur d'étape 100% :
1. Définissez transform sur translate(30px, -30px) scale(0.9).
2. Définissez box-shadow sur none.

Si vous n'êtes pas sûr, consultez l'indice. Après cette étape, vous verrez la lune bouger !

Si elle ne bouge pas, consultez la solution...

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Toutes les leçons de Animation d'éclipse solaire | Projet HTML/CSS

1HTML

Qu'allez-vous créer ?Configuration du code Le conteneur Lune

2CSS

Pseudo-élément de la classe moon

Animation eclipse Leçon de projet

Responsivité