DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
03-08-2015

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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

6 Loaders con CSS

6 Loaders con CSS

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014

Guía rápida sobre los bordes en CSS

Guía rápida sobre los bordes en CSS

Con esta propiedad es posible definir el color, tamaño y estilo del cada uno de los 4 bordes que definen la caja de un elemento

Andrés Cruz 17-02-2014