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

Menú Radial con solo CSS

Menú Radial con solo CSS

Un waffle con CSS

Un waffle con CSS

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

¿Cómo crear un carrusel con CSS?

¿Cómo crear un carrusel con CSS?

En esta entrada veremos cómo crear un carrusel con solo CSS, veremos un par de variación más para ejemplificar la versatilidad del código presentado empleando las Animaciones y JavaScript.

Andrés Cruz 21-09-2015

Como mostrar contenido en filas expandibles con solo CSS

Como mostrar contenido en filas expandibles con solo CSS

En esta nueva entrega, veremos como mostrar contenido por filas en vez de columnas; sin embargo mantendremos el mismo principio.

Andrés Cruz 11-08-2014