Cómo crear una pelota rebotando con HTML y CSS - Web development

¿Quieres aprender a crear una pelota rebotando con HTML y CSS, sin JavaScript? 🏀💻

En este tutorial te muestro cómo crear desde cero una animación de rebote utilizando HTML, CSS, @keyframes, transform, translateY() y scale().

Aprenderás a:
✅ Crear la estructura HTML de una pelota animada.
✅ Dar forma circular a un elemento con border-radius.
✅ Crear un efecto de volumen utilizando radial-gradient().
✅ Posicionar la pelota con position: absolute.
✅ Crear animaciones CSS con @keyframes.
✅ Utilizar translateY() para simular el movimiento.
✅ Utilizar scale() para conseguir el efecto de aplastamiento al tocar el suelo.
✅ Controlar la velocidad de la animación con ease-in y ease-out.
✅ Crear una animación que se repite infinitamente con animation: infinite.

Este ejemplo es perfecto para aprender los fundamentos de las animaciones CSS y entender cómo combinar transformaciones y @keyframes para crear efectos visuales sin necesidad de JavaScript.

📌 En el código utilizamos principalmente:
@keyframes · transform · translateY() · scale() · border-radius · radial-gradient() · animation

Si estás aprendiendo HTML y CSS, este ejercicio es una buena forma de practicar animaciones y entender cómo funcionan las transformaciones CSS.

🔗 Código HTML:

🔗 Código CSS:

🔍MENTES GEEKS🔍
¿Te apasionan las matemáticas, la informática y los rompecabezas? ¡Entonces este es el lugar perfecto para ti! 🌟

En este canal, desentrañamos los misterios de los números, exploramos el poder de la programación y nos sumergimos en los desafíos más intrigantes de los rompecabezas. Desde los secretos de los números primos hasta los err 📢 Sígueme en todas las redes para no perderte nada:
Youtube: www.youtube.com/channel/UCW7d4aS6_M7YLmNnNi_L9zQ?sub_confirmation=1
Instagram: @mentesgeeks010
Twitter: @MundoMate13601
TikTok: @mentesgeeks10
Wuolah: wuolah.com/profile/MentesGeeks?referral=Sotsnia3
Blog: mentesgeeks10.blogspot.com
GitHub: github.com/mentesgeeks
Pinterest: ar.pinterest.com/mentesgeeks10/
Codepen: codepen.io/mentesgeeks

+ Leer más