Pseudo-élément de la classe moon

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

Défi

Facile

Dans le fichier CSS, ciblez la classe moon et utilisez le pseudo-élément ::before,

Définissez le contenu (content) de cet élément sur "" (chaîne vide).
Définissez la couleur d'arrière-plan (background-color) sur rgba(0, 0, 0, 0).
Définissez le rayon de bordure (border-radius) à 50%.
Définissez le z-index à -1.
Définissez la largeur (width) et la hauteur (height) à 100%.
Définissez la position sur absolute et l'affichage (display) sur block.
Ajoutez une animation nommée "eclipse-animation", qui s'exécutera toutes les 3.2s en mode linear, infinite et alternate .

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 Leçon de projet

Animation eclipse

Responsivité