css3实现的加载旋转等待效果

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/

css3实现的加载旋转等待效果

猜你喜欢