body{
background: #313131;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
span{
display: block;
width: 4px;
margin: 2.3px;
height: 20px;
background: #ffff;
animation:effect 1s ease infinite alternate;
}
span:nth-child(8){
animation-delay: 1s;
}
span:nth-child(7){
animation-delay: .9s;
}
span:nth-child(6){
animation-delay: .8s;
}
span:nth-child(5){
animation-delay: .7s;
}
span:nth-child(4){
animation-delay: .6s;
}
span:nth-child(3){
animation-delay: .5s;
}
span:nth-child(2){
animation-delay: .4s;
}
span:nth-child(1){
animation-delay: .3s;
}
@keyframes effect{
100%{
transform: scaleY(4);
}
}
h2{
color: rgb(253, 253, 253);
font-family: sans-serif;
text-align: center;
}