¡Un pequeño homenaje animado al personaje que ama odiar la Navidad, creado puramente con HTML y CSS!
Puedes crear un GIF fácilmente usando herramientas en línea como Giphy o ScreenToGif para mostrar la animación.
Este es un proyecto de diseño y animación front-end que recrea al Grinch usando únicamente elementos div de HTML y estilos de CSS. La meta era explorar las capacidades de las animaciones con keyframes, el uso de variables (custom properties) para un código más mantenible y la implementación de interactividad sin necesidad de JavaScript.
El resultado es un personaje con movimientos fluidos y orgánicos que, además, reacciona al cursor del usuario con una mueca de desaprobación.
- Animación 100% CSS: Todos los movimientos, desde el balanceo del cuerpo hasta el parpadeo de los ojos, están hechos con
@keyframes. - Diseño Interactivo: El Grinch reacciona cuando el usuario pasa el cursor sobre él, cambiando el color de sus ojos y acelerando sus movimientos.
- Código Moderno y Limpio: Se utilizan variables de CSS (
:root) para gestionar la paleta de colores de forma centralizada, haciendo el código más legible y fácil de modificar. - Diseño Responsivo: Gracias al uso de
media queries, el diseño se ajusta sutilmente para garantizar una buena visualización en dispositivos móviles. - Sin Dependencias: No se necesita ninguna librería o framework, solo un navegador web para abrir el archivo
grinch.html.
- HTML5: Para la estructura semántica del personaje.
- CSS3: Para todo el estilizado, posicionamiento, diseño y animaciones complejas.
- Clona este repositorio:
git clone [https://github.com/Imaforbes/grinch_animado.git]
- Navega a la carpeta del proyecto:
cd [grinch_animado] - Abre el archivo
grinch.htmlen tu navegador web preferido.
¡Y listo! Ya podrás ver al Grinch en acción.
- [Imanol] - [www.imaforbes.com]
- LinkedIn: [www.linkedin.com/in/imanol-perez]
- GitHub: [@imaforbes]