Pseudo-elemento da classe moon

Lição 8 de 10 do curso Animação de Eclipse Solar | Projeto HTML/CSS da Coddy.

Desafio

Fácil

No arquivo CSS, selecione a classe moon e use o pseudo-elemento ::before,

Defina o conteúdo deste elemento como "" (String vazia).
Defina o background-color como rgba(0, 0, 0, 0).
Defina o border-radius como 50%.
Defina o z-index como -1.
Defina o width e o height como 100%.
Defina o position como absolute e defina o display como block.
Adicione uma animação chamada "eclipse-animation", que será executada a cada 3.2s nos estados linear, infinite e alternate .

Experimente você mesmo

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

Todas as lições de Animação de Eclipse Solar | Projeto HTML/CSS

1HTML

O que você vai criar?Configuração do Código O Container da Lua

2CSS

Pseudo-elemento da classe moon Lição de projeto

Animação eclipse

Responsividade