css3实现的加载旋转等待效果:
当大家打开一个网站的时候,如果要加载的内容较多,往往会出现一个这样的效果,内容在呈现之前会出现一个旋转的图标,看着这种场景,用户一般都会知道,网站在努力加载中,还是有期待的,非常的人性化,否则如果光秃秃的一片,用户难以确定网站处于何种状态。下面是一个使用css3实现的此功能,需要的朋友可以借鉴一下。代码如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> body { margin:0; padding:0; } /* for busy */ #busyIcon { z-index:99999; position:absolute; top:0;left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); } .container{ width:100px; height:100px; background-color:black; opacity:0.8; margin-top:-50px; margin-left:-50px; position:absolute; top:50%; left:50%; -webkit-border-radius:10%; } .top,.base{ height:30%; } .spinner{ height:40%; width:40%; position:relative; margin:0 auto; } .spinner div{ width:12%; height:26%; background-color:white; position:absolute; left:44.5%; top:37%; opacity:0; -webkit-border-radius:30%; -webkit-animation:fade 1s linear infinite; } .spinner div.bar1{ -webkit-transform:rotate(0deg) translate(0,-142%); -webkit-animation-delay:0s; } .spinner div.bar2{ -webkit-transform:rotate(30deg) translate(0,-142%); -webkit-animation-delay:-0.9167s; } .spinner div.bar3{ -webkit-transform:rotate(60deg) translate(0,-142%); -webkit-animation-delay:-0.833s; } .spinner div.bar4{ -webkit-transform:rotate(90deg) translate(0,-142%); -webkit-animation-delay:-0.75s; } .spinner div.bar5{ -webkit-transform:rotate(120deg) translate(0,-142%); -webkit-animation-delay:-0.667s; } .spinner div.bar6{ -webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s; } .spinner div.bar7 { -webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s; } .spinner div.bar8 { -webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s; } .spinner div.bar9 { -webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s; } .spinner div.bar10 { -webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s; } .spinner div.bar11 { -webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s; } .spinner div.bar12 { -webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s; } @-webkit-keyframes fade { from {opacity: 1;} to {opacity: 0.25;} } /*End busy*/ </style> </head> <body> <div id="busyIcon"> <div class="container"> <div class="top"></div> <div class="spinner"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> <div class="bar4"></div> <div class="bar5"></div> <div class="bar6"></div> <div class="bar7"></div> <div class="bar8"></div> <div class="bar9"></div> <div class="bar10"></div> <div class="bar11"></div> <div class="bar12"></div> </div> <div class="base"></div> </div> </div> </body> </html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15418
更多内容可以参阅:http://www.softwhy.com/divcss/