Creación de una animación de la órbita de la Tierra con CSS

Introducción

En este proyecto, aprenderás cómo crear una animación CSS que simule la órbita de la Tierra alrededor del Sol. Este proyecto te ayudará a comprender los conceptos de las animaciones CSS y cómo aplicarlos para crear una experiencia web dinámica y visualmente atractiva.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la animación para el elemento .earth-con
• Cómo usar la regla @keyframes para la animación orbit para crear la rotación de la Tierra alrededor del centro

🏆 Logros

Después de completar este proyecto, podrás:

• Crear una animación CSS que simule la órbita de la Tierra alrededor del Sol
• Comprender los conceptos de las animaciones CSS y cómo aplicarlos para crear experiencias web dinámicas y visualmente atractivas
• Coordinar múltiples propiedades CSS para lograr el efecto de animación deseado

Configurar la estructura del proyecto

Para comenzar, abre el entorno de experimentación, y la estructura del directorio es la siguiente:

├── css
│   └── style.css
└── index.html

Donde:

• index.html es la página principal.
• css/style.css es el archivo CSS donde debes agregar código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

A continuación, abre la "Web 8080" en la parte superior de la máquina virtual (VM) y actualiza manualmente la página para ver el siguiente efecto en tu navegador:

Configurar la animación

En este paso, aprenderás cómo agregar la animación al elemento .earth-con en el archivo css/style.css.

1. Abre el archivo css/style.css en el editor de código, deslízate hacia el final del código y verás que orbit es la regla @keyframes ya proporcionada y esta regla @keyframes define la secuencia de la animación.

2. Encuentra la clase .earth-con en el archivo CSS.

3. Dentro de la clase .earth-con, agrega las siguientes propiedades CSS para definir la animación:

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

Esto hará que el elemento .earth-con gire alrededor del centro de la pantalla, simulando la órbita de la Tierra alrededor del Sol.

4. Guarda el archivo style.css.
5. Vuelve a tu navegador y actualiza la página. Deberías ver el siguiente efecto:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios (labs) en LabEx para mejorar tus habilidades.