代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS代码:
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2196f3;
}
.loader
{
position: relative;
display: flex;
}
.loader span
{
width: 50px;
height: 300px;
margin: 0 20px;
background: #2196f3;
animation: animate 1.4s linear infinite;
}
.loader span:nth-child(1)
{
animation-delay: 0s;
}
.loader span:nth-child(2)
{
animation-delay: 0.2s;
}
.loader span:nth-child(3)
{
animation-delay: 0.4s;
}
.loader span:nth-child(4)
{
animation-delay: 0.6s;
}
.loader span:nth-child(5)
{
animation-delay: 0.8s;
}
.loader span:nth-child(6)
{
animation-delay: 1s;
}
.loader span:nth-child(7)
{
animation-delay: 1.2s;
}
@keyframes animate
{
0%
{
box-shadow: 0 0 0 rgba(0, 0, 0, .5);
opacity: 0;
transform: translateX(-50px) scale(1.0);
}
50%
{
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
opacity: 1;
transform: translateX(0px) scale(1.2);
}
100%
{
box-shadow: 0 0 0 rgba(0, 0, 0, .5);
opacity: 0;
transform: translateX(50px) scale(1.0);
}
}