Animación eclipse
Lección 9 de 10 del curso Animación de Eclipse Solar | Proyecto HTML/CSS de Coddy.
Desafío
FácilEn el archivo CSS, crea una animación usando @keyframes:
- Nombra la animación "eclipse-animation".
- Añade tres selectores de fotogramas clave (keyframes-selector) que sean
0%,50%y100%. Añade estilos CSS en el selector de fotogramas clave 0%:
1. Establece box-shadow a
none.2. Establece transform a
translate(-30px, 30px) scale(0.9).Añade estilos CSS en el selector de fotogramas clave 50%:
1. Establece transform a
translate(0px, 0px) scale(1.02).2. Establece box-shadow a
0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.3. Establece background-color a
#efdbd8.Añade estilos CSS en el selector de fotogramas clave 100%:
1. Establece transform a
translate(30px, -30px) scale(0.9).2. Establece box-shadow a
none.
Si no estás seguro, consulta la pista. ¡Después de este paso verás la luna moviéndose!
Si no se mueve, consulta la solución...
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>