Pseudoelemento de la clase moon

Lección 8 de 10 del curso Animación de Eclipse Solar | Proyecto HTML/CSS de Coddy.

Desafío

Fácil

En el archivo CSS, selecciona la clase moon y utiliza el pseudo-elemento ::before,

Establece el contenido de este elemento como "" (cadena vacía).
Establece el background-color en rgba(0, 0, 0, 0).
Establece el border-radius en 50%.
Establece el z-index en -1.
Establece el width y height en 100%.
Establece la position en absolute y establece el display en block.
Añade una animación llamada "eclipse-animation", que se ejecutará cada 3.2s en estado linear, infinite y alternate .

Pruébalo tú mismo

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

Todas las lecciones de Animación de Eclipse Solar | Proyecto HTML/CSS

1HTML

¿Qué vas a crear?Configuración del código El contenedor de la luna

2CSS

Pseudoelemento de la clase moon Lección de proyecto

Animación eclipse

Responsividad