CSS
@keyframes bar {
50% {
height: 139px;
}
}
body {
background: #050505;
}
figure {
height: 150px;
width: 95%;
max-width: 350px;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
box-sizing: border-box;
border: 1px solid #83F556;
}
div {
width: 12.5%;
height: 100%;
display: inline-block;
}
div:after {
content: "";
position: absolute;
bottom: 0;
width: 12.5%;
animation: bar 1.5s infinite linear;
background: #83F556;
box-shadow: 0px 0px 25px #83F556;
height: 47px;
}
div:nth-child(1):after {
animation-delay: -1s;
background: #83F556;
box-shadow: 0px 0px 25px #83F556;
}
div:nth-child(2):after {
animation-delay: -1.2s;
background: #51B52A;
box-shadow: 0px 0px 25px #51B52A;
}
div:nth-child(3):after {
animation-delay: -2s;
background: #248000;
box-shadow: 0px 0px 25px #248000;
}
div:nth-child(4):after {
animation-delay: -2.4s;
background: #83F556;
box-shadow: 0px 0px 25px #83F556;
}
div:nth-child(5):after {
animation-delay: -3s;
background: #51B52A;
box-shadow: 0px 0px 25px #51B52A;
}
div:nth-child(6):after {
animation-delay: -3.6s;
background: #248000;
box-shadow: 0px 0px 25px #248000;
}
div:nth-child(7):after {
animation-delay: -4s;
background: #83F556;
box-shadow: 0px 0px 25px #83F556;
}
div:nth-child(8):after {
animation-delay: -4.8s;
background: #51B52A;
box-shadow: 0px 0px 25px #51B52A;
}
div:nth-child(9):after {
animation-delay: -5s;
background: #248000;
box-shadow: 0px 0px 25px #248000;
}
1 Response