<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>logging</title>
<style>
@keyframes beat{
70%{
transform: scale(1,1);
}
100%{
transform: scale(1.3,1.3);
}
}
body{
margin: 0;
padding: 0;
background: #000;
}
.box{
width: 400px;
height: 450px;
/*border: 2px solid #000;*/
margin: 150px auto 0;
text-align: center;
}
.box div{
float: left;
width: 10px;
height: 60px;
margin: 50px 20px 50px;
border-radius: 3px;
border: 1px solid rgba(255,237,151,0.3);
animation: beat 500ms linear 0s infinite alternate;
background: #fff;
}
.box div:nth-child(1){
animation-delay: 100ms;
}
.box div:nth-child(2){
animation-delay: 200ms;
}
.box div:nth-child(3){
animation-delay: 300ms;
}
.box div:nth-child(4){
animation-delay: 400ms;
}
.box div:nth-child(5){
animation-delay: 500ms;
}
.box div:nth-child(6){
animation-delay: 600ms;
}
.box div:nth-child(7){
animation-delay: 700ms;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- <p>Loading</p> -->
</div>
</body>
</html>
