Agregar un fondo animado a su sitio web o aplicación puede contribuir a crear un diseño único e interesante. Los fondos creativos pueden evocar emociones y mejorar la experiencia del usuario.
Hay muchas formas de crear un fondo animado para su aplicación, pero una simple combinación de HTML y CSS simples funciona particularmente bien. Consulte este ejemplo, aprenda cómo funciona su código y vea una demostración en vivo del fondo animado final.
Tabla de contenido
Crear la estructura HTML
Vas a crear un fondo de color azul con burbujas que crecen y flotan hacia arriba. Puedes ver el resultado final en esto. codepen.
Comience creando una sección con el contenedor de clase para albergar la animación.
Luego, crea 10 divs que representarán las burbujas. Dentro de cada div, crea un intervalo con el punto de clase. Puede aprender estas etiquetas HTML esenciales en 10 minutos si es nuevo en HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Estilo con código CSS
Puedes crear increíbles efectos de fondo usando sólo HTML. Pero para este proyecto, usarás CSS para diseñar y animar el fondo.
Primero, establezca el margen y el relleno en 0 para garantizar que no haya espacios alrededor del fondo.
* {
margin: 0;
padding: 0;
}
Luego, diseñe la sección principal usando la clase contenedora. Esta sección tendrá 100% de ancho y alto para llenar toda la página. Establece su color de fondo como un tono de azul y dale una posición absoluta.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Diseñe el H1 también con una posición absoluta. Para colocarlo en el centro de la página, comience configurando su posición superior izquierda al 50%. Luego usa traducir para moverlo hacia arriba y hacia la izquierda, de modo que su centro esté exactamente en el medio.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
A continuación, diseñe los divs que serán circulares para que actúen como burbujas animadas. Dale a cada div una altura, ancho y borde. El gran radio del borde garantiza que el borde sea un círculo. Además, establezca una duración de la animación utilizando la propiedad de animación CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Diseñe los puntos con una altura y un ancho de 5 píxeles. Dale a los puntos un radio de borde y un fondo blanco. Coloque cada uno de manera absoluta, cerca de la parte superior derecha de su div principal.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
A continuación, utilice el selector nth-child para colocar cada div con diferentes configuraciones. Puedes nombrar la animación animada; lo definirás más tarde usando @keyframes.
Utilice nth-child(2) para abordar el primer div ya que el primer hijo del elemento .wrapper es h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Puedes dar a los divs inferiores porcentajes más altos para que suban a la cima en diferentes intervalos.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Utilice @keyframes para cambiar y rotar gradualmente los círculos y puntos en diferentes intervalos. En el siguiente código, los puntos giran 70 grados y los círculos 360. Esta rotación crea el efecto de burbuja.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Puedes hacer que los fondos sean más elegantes usando patrones CSS. Los patrones te permiten crear ondas, cuadrículas, hojas y otros patrones para ayudarte a crear animaciones asombrosas.
Puedes animar muchas propiedades usando CSS
Puedes crear diferentes tipos de animaciones usando CSS. Estos incluyen cambiar el color de fondo y retrasar el tiempo de ejecución de una animación.
También puedes establecer la frecuencia con la que se debe ejecutar una animación, incluso hasta el infinito. También puedes establecer la dirección en la que debe moverse la animación: hacia adelante o hacia atrás. Es divertido jugar con animaciones y puedes usarlas para darle vida a tus aplicaciones.