Creando un fondo vivo con CSS

- Andrés Cruz

Creando un fondo vivo con CSS

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 lis (un li por cuadrado) ubicados al todo el ancho de la pantalla; a estos lis 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 y height.
  • 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.

Crea tantos lis como desees y "juega" con las propiedades del mismo.

Veamos el CSS de algunos lis:

.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.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.