Ejercicio de programación con TailwindCSS: Transiciones y animaciones de Tailwind CSS
Código
0h 20m
Aprende a aplicar transiciones y animaciones en Tailwind CSS 3.4.10 con clases de utilidad. Ejercicio práctico para mejorar tus habilidades en diseño web.
Crea un archivo HTML con CDN que incluya un botón con las siguientes características utilizando Tailwind CSS:
- El botón debe tener una clase de transición que afecte a todas las propiedades.
- La transición debe tener una duración de 500ms.
- La transición debe comenzar y terminar lentamente, acelerando en el medio.
- Al pasar el ratón sobre el botón, el botón debe escalar al 110% de su tamaño original.
- Al pasar el ratón sobre el botón, el color de fondo del botón debe cambiar de azul a rojo.
Todos los ejercicios de programación de TailwindCSS
Evalúa tus conocimientos con ejercicios de programación en TailwindCSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Fundamentos del diseño responsive en Tailwind CSS
Código
Instalación de Tailwind CSS
Código
Contenedores y columnas en Tailwind CSS
Código
Conocimiento general de Tailwind CSS - Evaluación código
Código
Utilidades de espaciado y alineación en Tailwind CSS
Puzzle
Introducción a Tailwind CSS
Test
Clases de bordes de Tailwind CSS
Código
Grid en Tailwind CSS
Código
Clases de colores y fondo de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Flexbox en Tailwind CSS
Puzzle
Clases de tamaño de Tailwind CSS
Puzzle
Hover, focus y estado de Tailwind CSS
Código
Conocimiento general de Tailwind CSS - Evaluación multirespuesta
Test
Fundamentos del sistema de Utility-First de Tailwind CSS
Test
Tutorial para resolver este ejercicio de programación
TailwindCSS
Transiciones y animaciones de Tailwind CSS
Clases de utilidad