参考秒味课堂 代码发出来备忘
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="test.css" rel="external nofollow" type="text/css" />
</head>
<body>
<div class="loading">
<div class="load">
<div class="layer"></div>
<div class="layer2"></div>
<div class="text">25%</div>
</div>
<div class="loadshadow"></div>
</div>
</body>
</html>
css3
body {position: relative;}
@keyframes shadow
{
0%
{
-webkit-transform: scale(0.8); opacity: 0.5;
-moz-transform: scale(0.8); opacity: 0.5;
-ms-transform: scale(0.8); opacity: 0.5;
-o-transform: scale(0.8); opacity: 0.5;
transform: scale(0.8); opacity: 0.5;
}
100%
{
-webkit-transform: scale(1); opacity: 1;
-moz-transform: scale(1); opacity: 1;
-ms-transform: scale(1); opacity: 1;
-o-transform: scale(1); opacity: 1;
transform: scale(1); opacity: 1;
}
}
@keyframes move1
{
0%
{
-webkit-transform: translateY(7px);
-moz-transform: translateY(7px);
-ms-transform: translateY(7px);
-o-transform: translateY(7px);
transform: translateY(7px);
}
100%
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes move2
{
0%
{
transform:rotate(0deg);
}
100%
{
transform: rotate(-360deg);
}
}
@keyframes move3
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}.loading { width: 120px; height: 140px; position: fixed; left:calc(50% - 60px); top:calc(50% - 70px);}
.load {width: 120px; height: 100px; background: url(./image/loading3.png); position: absolute;left: 0px; top: 0px; -webkit-animation: .5s move1 infinite alternate linear; animation: .5s move1 infinite alternate linear;}
.layer {width:120px; height:100px; background: url(./image/loading4.png) no-repeat; position: absolute; top: 0px; left: 0px; animation: 1.2s move2 infinite linear;}
.layer2 {width: 120px; height: 100px; background: url(./image/loading5.png) no-repeat; position: absolute; top:0px; left: 0px; animation:1.2s move3 infinite linear;}
.text { width: 120px; height: 100px; position: absolute; top: 0px; left: 0px; text-align: center; line-height: 100px; font:bold 16px/100px bold; color:#f9725c;}
.loadshadow{ width: 100px; height: 20px; margin:0 auto; background:-webkit-radial-gradient(contain,rgba(0,0,0,0.7),rgba(0,0,0,0)); position: absolute; left:10px; bottom:0px;-webkit-animation: .5s shadow infinite alternate linear;}
