Animação eclipse

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

Desafio

Fácil

No arquivo CSS, crie uma animação usando @keyframes:

Nomeie a animação como "eclipse-animation".
Adicione três seletores de keyframes que são 0% , 50% e 100%.
Adicione estilos CSS no seletor de keyframes 0%:
1. Defina box-shadow como none.
2. Defina transform como translate(-30px, 30px) scale(0.9).
Adicione estilos CSS no seletor de keyframes 50%:
1. Defina transform como translate(0px, 0px) scale(1.02).
2. Defina box-shadow como 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Defina background-color como #efdbd8.
Adicione estilos CSS no seletor de keyframes 100%:
1. Defina transform como translate(30px, -30px) scale(0.9).
2. Defina box-shadow como none.

Se você não tiver certeza, consulte a dica. Após esta etapa, você verá a lua se movendo!

Se não estiver se movendo - consulte a solução…

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

Animação eclipse Lição de projeto

Responsividade