Html
    Css
    Js

    
                        
#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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

loading步行效果(原创)

复制粘贴到自己的html文件和css文件即可使用
可以再加工做成脚印的样子

0