<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.loadBlock {
width: 104px;
height: 84px;
position: fixed;
top: 43%;
left: 50%;
margin-left: -52px;
text-align: center;
z-index: 999;
color: green;
overflow: hidden;
background:#6959CD;
border-radius:5px ;
}
.loadBg {
background: url(img/loadCartoon.png) 0 -80px no-repeat;
width: 90px;
height: 50px;
margin: 11px auto 0;
background-size: cover;
animation: loadBg 1s infinite linear;
-webkit-animation: loadBg 1s infinite linear;
position: relative;
z-index: 2;
}
@keyframes loadBg {
0% {
left: -5.2rem;
}
99.99% {
left: 5.2rem;
}
100% {
left: -5.2rem;
}
}
.loadCartoon {
position: absolute;
top: 0;
left: 0.6rem;
animation: loadCartoon 1s linear infinite alternate;
-webkit-animation: loadCartoon 1s linear infinite alternate;
z-index: 6;
}
@keyframes loadCartoon {
0% {
top: 0.4rem;
}
50% {
top: 0rem;
}
100% {
top: 0.4rem;
}
}
.loadHead {
background: url(img/loadCartoon.png) no-repeat;
width: 90px;
height: 34px;
position: absolute;
left: 19px;
top: 4px;
z-index: 9;
background-size: cover;
}
.loadBody {
background: url(img/loadCartoon.png) 0 -34px no-repeat;
width: 90px;
height: 15px;
position: absolute;
left: 19px;
top: 32.4px;
z-index: 7;
background-size: cover;
}
.loadDun {
background: url(img/loadCartoon.png) 0 -49px no-repeat;
width: 90px;
height: 18px;
position: absolute;
left: 36.4px;
top: 34px;
z-index: 10;
background-size: cover;
}
.loadCappa {
background: url(img/loadCartoon.png) 0 -67px no-repeat;
width: 90px;
height: 11px;
position: absolute;
left: 46px;
top: 28px;
z-index: 8;
background-size: cover;
animation: loadCappa 1s ease-in-out 0s infinite;
-webkit-animation: loadCappa 1s ease-in-out 0s infinite;
transform-origin: 0px 5px 20px;
-webkit-transform-origin: 0px 5px 20px;
}
@keyframes loadCappa {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
50% {
transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
.loadCon {
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
letter-spacing: 2px;
position: relative;
z-index: 4;
}
.backcolor {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: black;*/
opacity: 0.5;
border-radius: 5%;
-webkit-border-radius: 5%;
}
</style>
</head>
<body>
<div class="loadBlock">
<div class="loadBg"></div>
<div class="loadCartoon">
<div class="loadHead"></div>
<div class="loadBody"></div>
<div class="loadDun"></div>
<div class="loadCappa"></div>
</div>
<p class="loadCon">加载中...</p>
<div class="backcolor"></div>
</div>
</body>
</html>
时间： 2024-08-28 13:31:24