Creando un fondo vivo con CSS
- Andrés Cruz
Los fondos vivos o animados son un recurso de los más valiosos y vistosos empleados en distintas plataformas como Android, IOS, Windows, etc; aunque estos fondos se pueden crear muy fácilmente para ser aplicados en una página web con un poco de CSS; como podrás imaginar emplearemos las Animaciones en CSS para crear nuestro fondo vivo o animado que luzca como el siguiente:
El mismo fondo vivo lo puedes ver aplicado en esta entrada en particular.
Definamos el HTML y CSS para nuestro fondo vivo
Cada una de esas "cajitas" o cuadrados que suben desde la parte inferior hasta la superior de la web son elementos li
s (un li
por cuadrado) ubicados al todo el ancho de la pantalla; a estos li
s se les aplica distintas propiedades CSS para que obtengan las siguientes características a través de CSS:
- Tamaños distintos con las propiedades
width
yheight
. - Transparencias distintas empleando colores RGBA a través de la propiedad
background
. - Tiempo variable en la duración de las animaciones a través de la propiedad
animation-duration
. - Tiempo de retraso en las animaciones a través de la propiedad
animation-delay
. - Variación de la posición en donde aparecen a través de la propiedad
left
.
Y esto explicado anteriormente es el corazón de nuestro ejemplo y como te habrás dado cuenta con todas estas propiedades en conjunto se logra crear un conjunto variado y distribuido de "cajitas" que pareciera que aparecen de forma aleatoria.
li
s como desees y "juega" con las propiedades del mismo.Veamos el CSS de algunos li
s:
.bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; } .bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles li:nth-child(16) { left: 75%; width: 20px; height: 20px; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-duration: 25s; animation-duration: 25s; background-color: rgba(255, 255, 255, 0.3); }
El fondo vivo creado y mostrado en esta entrada es un recurso tomado y modificado a gusto del siguiente enlace de CodePen.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter