pseudo-elemento della classe moon

Lezione 8 di 10 del corso Animazione dell'eclissi solare | Progetto HTML/CSS di Coddy.

Sfida

Facile

Nel file CSS, seleziona la classe moon e usa lo pseudo-elemento ::before,

Imposta il contenuto di questo elemento su "" (stringa vuota).
Imposta il colore di sfondo su rgba(0, 0, 0, 0).
Imposta il raggio del bordo su 50%.
Imposta lo z-index su -1.
Imposta la larghezza e l’altezza su 100%.
Imposta la posizione su absolute e il display su block.
Aggiungi l’animazione denominata "eclipse-animation", che verrà eseguita ogni 3.2s in modalità linear, infinite e alternate .

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>