Viaje hacia el Cielo Occidental

Introducción

En este proyecto, aprenderás a crear una secuencia animada utilizando CSS. El proyecto se basa en la historia de un grupo de discípulos que emprenden un viaje hacia el Cielo Occidental en busca de los Sutras Budistas. Sin embargo, fueron atrapados por demonios en el camino, y un personaje llamado Tom utilizó CSS para salvarlos, permitiendo que los discípulos continuaran su viaje hacia el Oeste.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar los marcos de animación para los personajes de la escena
• Cómo definir las claves de animación para cada personaje para crear la ilusión de movimiento
• Cómo hacer que las animaciones se repitan indefinidamente para crear una animación continua y sin saltos

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Utilizar animaciones CSS para crear efectos visuales dinámicos y atractivos
• Coordinar múltiples animaciones para crear una secuencia de animación coherente y sincronizada
• Optimizar las animaciones para la rendimiento y la respuesta

Establece la estructura del proyecto

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

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

Donde:

• index.html es la página principal.
• images es la carpeta de imágenes.
• css es la carpeta de CSS.

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

Cuando visualices la página index.html en el navegador, notarás que la animación solo se reproduce una vez y luego se detiene. El efecto de la página es el siguiente:

Establece los marcos de animación

En este paso, aprenderás a establecer los marcos de animación para los personajes del proyecto Viaje hacia el Cielo Occidental.

1. Abre el archivo css/style.css en el editor de código y verás que a1, a2, a3, a4 son las cuatro reglas @keyframes que se han dado, y que la regla @keyframes define la secuencia de animación. Estas claves de animación definen la animación para cada personaje, moviendo la imagen de fondo horizontalmente para crear la ilusión de movimiento.
2. En la regla .actor:first-child, cambia al siguiente código para animar el primer personaje:

animation: a1 0.8s steps(8) infinite;

Esto hará que la animación del primer personaje se repita indefinidamente, con cada fotograma durando 0,8 segundos y la animación teniendo 8 pasos.

3. En la regla .actor:nth-child(2), cambia al siguiente código para animar el segundo personaje:

animation: a2 0.8s steps(8) infinite;

Esto hará que la animación del segundo personaje se repita indefinidamente, con cada fotograma durando 0,8 segundos y la animación teniendo 8 pasos.

4. En la regla .actor:nth-child(3), cambia al siguiente código para animar el tercer personaje:

animation: a3 0.8s steps(8) infinite;

Esto hará que la animación del tercer personaje se repita indefinidamente, con cada fotograma durando 0,8 segundos y la animación teniendo 8 pasos.

5. En la regla .actor:last-child, cambia al siguiente código para animar el cuarto personaje:

animation: a4 0.8s steps(8) infinite;

Esto hará que la animación del cuarto personaje se repita indefinidamente, con cada fotograma durando 0,8 segundos y la animación teniendo 8 pasos.

6. Guarda el archivo style.css.

Ahora, cuando visualices el archivo index.html en el navegador, deberías ver que las animaciones de los personajes se repiten indefinidamente.

Resumen

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