html代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.load2 {
position: absolute;
width:200px;
height:160px;
background: url(‘data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNDgiIGN5PSIxMi40NjMiIGZpbGw9IiNEM0U2RkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjQ3Ljg5IiByeT0iMTIuMzY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDM4KSIvPjwvc3ZnPg==‘) no-repeat;
margin-left:-96px;
margin-top:-100px;
left:50%;
top:70%;
animation:small .8s infinite;
background-position: center;
}
@keyframes small {
0% {
transform: scale(1);
}
50% {
transform: scale(.4);
}
100% {
transform: scale(1);
}
}
.load {
position: absolute;
left:50%;
top:50%;
background: url(‘loading.png‘);
height:100px;
width:100px;
margin-left:-50px;
margin-top:-50px;
animation:test 4.5s steps(6) infinite,updown .8s infinite;
/*-webkit-animation:test 3.5s steps(6) infinite;*/
}
@keyframes test {
0% {
background-position: 0 0;
}
100% {
background-position: 0 600px;
}
}
@keyframes updown{
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0px);
}
}
</style>
<div class="load"></div>
<div class="load2"></div>
</div>
</body>
</html>
时间： 2024-10-18 07:39:02