#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文件即可使用
可以再加工做成脚印的样子