Las barras de baile son uno de los componentes clásicos que se utilizan para crear un sitio web atractivo. Son muy simples de implementar y se pueden usar como un cargador o una animación durante la grabación de sonido.
Enfoque: el enfoque es usar una lista desordenada para crear barras y luego animarlas usando fotogramas clave. Debe tener conocimiento de los fotogramas clave y la n-ésima propiedad secundaria de CSS antes de continuar en este artículo.
Código HTML: En esta sección, hemos creado una lista desordenada.
<!DOCTYPE html> <html> <head> <title>Dancing Bars</title> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
Código CSS: Para CSS, siga estos pasos:
- Paso 1: Alinee ul con el centro de la página.
- Paso 2: elimine todo el estilo de la lista y aplique un poco de ancho y alto para hacer una forma de barra.
- Paso 3: use fotogramas clave para animar barras a lo largo del eje Y. Aumente la escala en el cuadro final para hacerlo.
- Paso 4: use la propiedad secundaria n-th para aplicar un retraso de .1s entre cada elemento li.
Sugerencia: también puede hacer el mismo diseño en vista horizontal usando scaleX y manteniendo la lista en su disposición predeterminada.
ul{
position: absolute;
top:50%;
left:50%;
display: flex;
}
ul li{
list-style: none;
width: 6px;
height: 20px;
background: #262626;
margin: 0 4px;
animation: animate .7s infinite alternate
}
@keyframes animate {
0%{
transform: scaleY(1);
}
25%{
transform: scaleY(1);
}
50%{
transform: scaleY(1);
}
75%{
transform: scaleY(1);
}
100%{
transform: scaleY(3);
}
}
ul li:nth-child(1){
animation-delay: .1s;
}
ul li:nth-child(2){
animation-delay: .2s;
}
ul li:nth-child(3){
animation-delay: .3s;
}
ul li:nth-child(4){
animation-delay: .4s;
}
ul li:nth-child(5){
animation-delay: .5s;
}
ul li:nth-child(6){
animation-delay: .6s;
}
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html>
<head>
<title>Dancing Bars</title>
<style>
ul{
position: absolute;
top:50%;
left:50%;
display: flex;
}
ul li{
list-style: none;
width: 6px;
height: 20px;
background: #262626;
margin: 0 4px;
animation: animate .7s infinite alternate
}
@keyframes animate {
0%{
transform: scaleY(1);
}
25%{
transform: scaleY(1);
}
50%{
transform: scaleY(1);
}
75%{
transform: scaleY(1);
}
100%{
transform: scaleY(3);
}
}
ul li:nth-child(1){
animation-delay: .1s;
}
ul li:nth-child(2){
animation-delay: .2s;
}
ul li:nth-child(3){
animation-delay: .3s;
}
ul li:nth-child(4){
animation-delay: .4s;
}
ul li:nth-child(5){
animation-delay: .5s;
}
ul li:nth-child(6){
animation-delay: .6s;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</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