#loading {
background-color:#000000;
height:100%;
width:100%;
position:fixed;
z-index:1;
margin-top:0px;
top:0px;
}
#loading-center {
position:absolute;
left:40%;
top:50%;
height:20px;
width:100px;
}
.foot {
height:20px;
width:30px;
background-color:#ffffff;
border-radius:70% 30% 30% 70%;
position:absolute;
}
#foot_one {
animation:foot 2s linear infinite;
-moz-animation:foot 2s infinite;
/* Firefox */
-webkit-animation:foot 2s infinite;
/* Safari and Chrome */
-o-animation:foot 2s infinite;
/* Opera */
}
#foot_two {
animation:foot 2s linear infinite -.4s;
-moz-animation:foot 2s infinite -.4s;
/* Firefox */
-webkit-animation:foot 2s infinite -.4s;
/* Safari and Chrome */
-o-animation:foot 2s infinite -.4s;
/* Opera */
}
#foot_three {
animation:foot 2s linear infinite -.8s;
-moz-animation:foot 2s infinite -.8s;
/* Firefox */
-webkit-animation:foot 2s infinite -.8s;
/* Safari and Chrome */
-o-animation:foot 2s infinite -.8s;
/* Opera */
}
#foot_four {
animation:foot 2s linear infinite -1.2s;
-moz-animation:foot 2s infinite -1.2s;
/* Firefox */
-webkit-animation:foot 2s infinite -1.2s;
/* Safari and Chrome */
-o-animation:foot 2s infinite -1.2s;
/* Opera */
}
#foot_five {
animation:foot 2s linear infinite -1.6s;
-moz-animation:foot 2s infinite -1.6s;
/* Firefox */
-webkit-animation:foot 2s infinite -1.6s;
/* Safari and Chrome */
-o-animation:foot 2s infinite -1.6s;
/* Opera */
}
@keyframes foot {
0% {
left:100px;
top:0
}
80% {
left:0;
top:0;
}
/* 左平移 */
85% {
left:0;
top:-20px;
width:20px;
height:20px;
}
/* 向上 */
90% {
width:40px;
height:15px;
}
/* 拉长返回 */
95% {
left:100px;
top:-20px;
width:20px;
height:20px;
}
/* 右平移 */
100% {
left:100px;
top:0;
}
}@-moz-keyframes foot /* Firefox */ {
0% {
left:100px;
top:0
}
80% {
left:0;
top:0;
}
/* 左平移 */
85% {
left:0;
top:-20px;
width:20px;
height:20px;
}
/* 向上 */
90% {
width:40px;
height:15px;
}
/* 拉长返回 */
95% {
left:100px;
top:-20px;
width:20px;
height:20px;
}
/* 右平移 */
100% {
left:100px;
top:0;
}
}@-webkit-keyframes foot /* Safari and Chrome */ {
0% {
left:100px;
top:0
}
80% {
left:0;
top:0;
}
/* 左平移 */
85% {
left:0;
top:-20px;
width:20px;
height:20px;
}
/* 向上 */
90% {
width:40px;
height:15px;
}
/* 拉长返回 */
95% {
left:100px;
top:-20px;
width:20px;
height:20px;
}
/* 右平移 */
100% {
left:100px;
top:0;
}
}@-o-keyframes foot /* Opera */ {
0% {
left:100px;
top:0
}
80% {
left:0;
top:0;
}
/* 左平移 */
85% {
left:0;
top:-20px;
width:20px;
height:20px;
}
/* 向上 */
90% {
width:40px;
height:15px;
}
/* 拉长返回 */
95% {
left:100px;
top:-20px;
width:20px;
height:20px;
}
/* 右平移 */
100% {
left:100px;
top:0;
}
}复制粘贴到自己的html文件和css文件即可使用
可以再加工做成脚印的样子