El efecto de bola de onda es una nueva entrada en el mundo de los efectos de animación que se utilizan en el diseño de aplicaciones web modernas. En este efecto tenemos unas bolas que se animan como una ola. Ahora puede agregarle diferentes elementos para que sea único, como un color diferente para las bolas y el retraso de la animación o cambiando el eje de la animación.
Enfoque: el enfoque consiste en crear primero algunas bolas de tamaño pequeño y luego usar fotogramas clave para animarlas y también cambiar el color de las bolas en cada división de fotogramas. Luego, agregaremos un retraso de animación a cada una de las bolas. Aunque, la parte de retraso de la animación es opcional.
Código HTML: en esta sección, hemos creado una serie de etiquetas de intervalo que se utilizarán para hacer las bolas. Todos ellos están envueltos dentro de una etiqueta div.
<!DOCTYPE html> <html> <head> <title>Wave Ball Effect</title> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: Primero, aplica un fondo oscuro a la etiqueta del cuerpo.
- Paso 2: ahora alinee toda la etiqueta de intervalo al centro de la página.
- Paso 3: ahora use la propiedad de animación con el nombre del identificador animado.
- Paso 4: ahora use fotogramas clave para aplicar borde y color para cada división de fotograma. Utilice la transformación en el eje Y.
- Paso 5: ahora use la propiedad secundaria n-th para dar un retraso de animación a cada etiqueta de intervalo.
body {
background: rgb(65, 63, 63);
}
.loader {
height: 40px;
position: absolute;
top: 50%;
left: 50%;
}
.loader span {
height: 15px;
width: 15px;
display: inline-block;
border-radius: 50%;
transition: all 0.5s;
animation: animate 2s infinite;
}
@keyframes animate {
0% {
border: 1px solid #fff;
background: transparent;
transform: translateY(0);
}
50% {
border: 1px solid #fff;
background: green;
transform: translateY(-25px);
}
100% {
border: 1px solid #fff;
background: yellow;
transform: translateY(0);
}
}
.loader span:nth-child(1) {
animation-delay: 0;
}
.loader span:nth-child(2) {
animation-delay: 0.1s;
}
.loader span:nth-child(3) {
animation-delay: 0.2s;
}
.loader span:nth-child(4) {
animation-delay: 0.3s;
}
.loader span:nth-child(5) {
animation-delay: 0.4s;
}
.loader span:nth-child(6) {
animation-delay: 0.5s;
}
Sugerencia: asegúrese de mantener el tamaño de las bolas pequeño y puede cambiar el eje de animación al eje X para obtener un efecto diferente.
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html>
<head>
<title>Wave Ball Effect</title>
<style>
body {
background: rgb(65, 63, 63);
}
.loader {
height: 40px;
position: absolute;
top: 50%;
left: 50%;
}
.loader span {
height: 15px;
width: 15px;
display: inline-block;
border-radius: 50%;
transition: all 0.5s;
animation: animate 2s infinite;
}
@keyframes animate {
0% {
border: 1px solid #fff;
background: transparent;
transform: translateY(0);
}
50% {
border: 1px solid #fff;
background: green;
transform: translateY(-25px);
}
100% {
border: 1px solid #fff;
background: yellow;
transform: translateY(0);
}
}
.loader span:nth-child(1) {
animation-delay: 0;
}
.loader span:nth-child(2) {
animation-delay: 0.1s;
}
.loader span:nth-child(3) {
animation-delay: 0.2s;
}
.loader span:nth-child(4) {
animation-delay: 0.3s;
}
.loader span:nth-child(5) {
animation-delay: 0.4s;
}
.loader span:nth-child(6) {
animation-delay: 0.5s;
}
</style>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA