Esta sencilla demostración explica cómo utilizar animaciones CSS para obtener efectos visuales interesantes.
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.
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 un sección con la clase envoltura para albergar la animación.
Luego, crea 10 divs que representarán las burbujas. Dentro de cada div, crea un intervalo con la clase. punto. Puede aprenda estas etiquetas HTML esenciales en 10 minutos si eres nuevo en HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Estilo con código CSS
Puedes crear increíbles efectos de fondo usando solo 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.
.wrapperh1 {
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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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. animar; lo definirás más tarde usando @keyframes.
Usar enésimo niño (2) para abordar la primera div desde el primer hijo del .envoltura elemento es el h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Puedes dar a los divs inferiores porcentajes más altos para que suban a la cima en diferentes intervalos.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
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 burbuja.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Puede 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.
