HTML部分:
<div id="loading"> <div id="loading-center"> <div class="foot" id="foot_one"></div> <div class="foot" id="foot_two" style="left:20px;"></div> <div class="foot" id="foot_three" style="left:40px;"></div> <div class="foot" id="foot_four" style="left:60px;"></div> <div class="foot" id="foot_five" style="left:80px;"></div> </div> </div>
CSS部分:
#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; } }
评论前必须登录!
注册