Aprenderemos en este artículo a crear un fondo web animado para una página web simple. Para ello utilizaremos los lenguajes de código HTML y CSS.
Abordaremos en primer lugar el código HTML. Empezaremos creando un div class con el nombre particle. Y a su vez, crearemos del mismo modo un id con el nombre particle1.
Crearemos un <div> </div>, y escribiremos el código entre las etiquetas <body> </body>.
<div class='particle' id='particle1'></div>
<div class='particle' id='particle2'></div>
<div class='particle' id='particle3'></div>
<div class='particle' id='particle4'></div>
<div class='particle' id='particle5'></div>
<div class='particle' id='particle6'></div>
<div class='particle' id='particle7'></div>
<div class='particle' id='particle8'></div>
<div class='particle' id='particle9'></div>A continuación abordaremos el código CSS. Primero estableceremos el body (o cuerpo de la página) donde irán insertadas las partículas que vamos a crear.
html, body {
height: 100%;
min-height: 100vh;
background-color: #FFF;
}Seguidamente crearemos la forma en sí de la partícula con el siguiente código CSS.
.particle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 15vmin;
height: 15vmin;
border-radius: 50%;
box-shadow: 0 3vmin 3vmin rgba(0, 0, 0, 0.3), 0 -6vmin 3vmin rgba(0, 0, 0, 0.1) inset, 0 9vmin 3vmin rgba(255, 255, 255, 0.1) inset;
opacity: 0;
animation: doit 2500ms infinite cubic-bezier(0.125, 0, 0.41, 0);
animation-direction: reverse;
}Una vez que hemos creado la forma, le daremos color, y para que haya variedad de colores, asignaremos 1 color a cada partícula, con el siguiente código CSS.
Ya casi hemos terminado. Crearemos por último la regla keyframes el siguiente código CSS
@keyframes doit {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(0) translateY(0) scale(0.1);
}
}Nota Importante: Un keyframe es una regla de CSS que permite construir animaciones, y esto se logra aplicando una transición de un elemento DOM de un conjunto de reglas de estilo, a otro. Funciona de la siguiente forma:Se declara la regla usando @keyframes y posterior a eso se le da un nombre a la animación.
La demostración que podéis ver a continuación, no tiene solo 9 partículas, sino que tiene 600 partículas. De ahí que el efecto visual sea impactante y muy decorativo.
Puedes ver el funcionamiento del Fondo Web Animado en el siguiente enlace: