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.

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.