<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预加载</title>
<style>
*{margin: 0;padding: 0;border: 0 none;}
p{text-align: center;margin-top: 20px;}
.loading{position: relative; 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
.loading .center{position: relative;;left: 30%;top:60%;}
.loading span{position: absolute;bottom:0;display: block; 12px;height: 10px;background-color: #8067C5;animation: loading 1.5s infinite ease-in-out; }
.loading span:nth-child(2){left: 16px;animation-delay: 0.2s;}
.loading span:nth-child(3){left: 32px;animation-delay: 0.4s;}
.loading span:nth-child(4){left: 48px;animation-delay: 0.6s;}
.loading span:nth-child(5){left: 64px;animation-delay: 0.8s;}
@keyframes loading {
0%{
background-color: #8067C5;
transform: translateY(0);
height: 10px;
}
25%{
background-color: #3196DC;
transform: translateY(15px);
height: 40px;
}
50%{
background-color: #8067C5;
transform: translateY(0);
height: 10px;
}
100%{
background-color: #8067C5;
transform: translateY(0);
height: 10px;
}
}
/*第二种预加载*/
.loading2{position: relative; 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
.loading2 .center{position: relative;;left: 40%;top:30%;}
.loading2 span{display: block; 20px;height: 20px;background-color: #8067C5;position: absolute;animation: item1 1.5s infinite ease-in-out;}
.loading2 span:nth-child(2){left: 20px;animation: item2 1.5s infinite ease-in-out;}
.loading2 span:nth-child(3){top: 20px;left:0;animation: item3 1.5s infinite ease-in-out;}
.loading2 span:nth-child(4){left: 20px;top:20px;animation: item4 1.5s infinite ease-in-out;}
@keyframes item1 {
0%{
border-radius: 0;
transform: translateX(0) translateY(0) rotate(0deg);
}
50%{
transform:translateX(-20px) translateY(10px) rotate(-180deg);
border-radius: 20px;
background-color: #4CAD84;
}
80%{
transform:translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
100%{
transform:translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
}
@keyframes item2{
0%{
border-radius: 0;
transform:translateX(0) translateY(0) rotate(0deg);
}
50%{
transform:translateX(20px) translateY(10px) rotate(180deg);
border-radius: 20px;
background-color: #CA5251;
}
80%{
transform:translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
100%{
transform:translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
}
@keyframes item3{
0%{
border-radius: 0;
transform:translateX(0) translateY(0) rotate(0deg);
}
50%{
transform:translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius: 20px;
background-color: #4C89CC;
}
80%{
transform:translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
100%{
transform:translateX(0) translateY(0) rotate(-360deg);
border-radius: 0;
}
}
@keyframes item4{
0%{
border-radius: 0;
transform:translateX(0) translateY(0) rotate(0deg);
}
50%{
transform:translateX(20px) translateY(-10px) rotate(180deg);
border-radius: 20px;
background-color: #D9A93B;
}
80%{
transform:translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
100%{
transform:translateX(0) translateY(0) rotate(360deg);
border-radius: 0;
}
}
/*第三种预加载*/
.loading3{position: relative; 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
.loading3 .center{position: relative;;left: 30%;top:40%;}
.loading3 span{opacity: 0.5;display: block; 20px;height: 20px;background-color: #CC525D;position: absolute;animation: three 1.5s infinite ease-in-out;border-radius: 20px;}
.loading3 span:nth-child(2){background-color: #8067C5;left: 25px;animation-delay: .2s;}
.loading3 span:nth-child(3){background-color: #de898c;left: 50px;animation-delay: .4s;}
.loading3 span:nth-child(4){background-color: #4CAD84;left: 75px;animation-delay: .6s;}
.loading3 span:nth-child(5){background-color: #D9A93B;left: 100px;animation-delay: .8s;}
@keyframes three {
0%{transform: translateY(0);box-shadow: 0 0 3px rgba(0, 0, 0, 0.01);opacity: 0.3;}
50%{transform: translateY(-10px);opacity: 1;box-shadow: 0 20px 3px rgba(0, 0, 0, 0.05);}
80%{transform: translateY(-5px);opacity: 0.7;box-shadow: 0 10px 3px rgba(0, 0, 0, 0.03);}
100%{transform: translateY(0);opacity: 0.3;box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}
}
</style>
</head>
<body>
<p>第一种预加载动画</p>
<div class="loading">
<div class="center">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<p>第二种预加载动画</p>
<div class="loading2">
<div class="center">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<p>第三种预加载动画</p>
<div class="loading3">
<div class="center">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>