继续发现优秀的加载动画（Loading）插件，这次是“ Ajax Style Loading Animation in CSS3 ( no Images ) ” – 无须图片CSS3的Ajax风格Loading加载动画，后附插件核心代码及官方演示链接：

HTML

<div id="loading">
  <div id="Gen" class="marginLeft">
    <div class="block" id="rotate_01"></div>
    <div class="block" id="rotate_02"></div>
    <div class="block" id="rotate_03"></div>
    <div class="block" id="rotate_04"></div>
    <div class="block" id="rotate_05"></div>
    <div class="block" id="rotate_06"></div>
    <div class="block" id="rotate_07"></div>
    <div class="block" id="rotate_08"></div>
    <div class="clearfix"></div>
  </div>
  <div id="facebook" class="marginLeft">
    <div id="block_1" class="facebook_block"></div>
    <div id="block_2" class="facebook_block"></div>
    <div id="block_3" class="facebook_block"></div>
    <div class="clearfix"></div>
  </div>
  <div id="circle" class="marginLeft">
    <div id="circle_1" class="circle"></div>
    <div id="circle_2" class="circle"></div>
    <div id="circle_3" class="circle"></div>
    <div class="clearfix"></div>
  </div>
  <div id="outer-bar" class="marginLeft">
    <div id="front-bar" class="bar-animation">
      <div id="bar_1" class="bar-line"></div>
      <div id="bar_2" class="bar-line"></div>
      <div id="bar_3" class="bar-line"></div>
      <div class="clearfix"></div>
    </div>
  </div>
  <div id="circular" class="marginLeft">
    <div id="circular_1" class="circular"></div>
    <div id="circular_2" class="circular"></div>
    <div id="circular_3" class="circular"></div>
    <div id="circular_4" class="circular"></div>
    <div id="circular_5" class="circular"></div>
    <div id="circular_6" class="circular"></div>
    <div id="circular_7" class="circular"></div>
    <div id="circular_8" class="circular"></div>
    <div class="clearfix"></div>
  </div>
</div>

CSS

#loading{
	width:100%;
}
.marginLeft{
	margin-right:30px;
}
#warning{
	font-size:16px;
}
#Gen{
	width:100px;
	height:100px;
	float:left;
	margin-left:250px;
	-webkit-transform:scale(0.6)
}
.block{
	-moz-border-radius:8px 8px 0px 0px;
	-webkit-border-radius:8px 8px 0px 0px;
	background-color:#efefef;
	height:36px;
	width:15px;
	float:left;
	-webkit-transform:scale(0.4);
	-webkit-animation-name: fade;
 	-webkit-animation-duration: 0.7s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	}
#rotate_01{
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	margin-left:1px;
	margin-top:30px;
 	-webkit-animation-delay: .3s;
}	
#rotate_02{
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	margin-left:-5px;
	margin-top:3px;
 	-webkit-animation-delay: 0.4s;
}
#rotate_03{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	margin-left:12px;
	margin-top:-8px;
 	-webkit-animation-delay: 0.5s;
}
#rotate_04{
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	margin-left:14px;
	margin-top:3px;
 	-webkit-animation-delay: 0.6s;
}
#rotate_05{
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	margin-left:-4px;
	margin-top:30px;
 	-webkit-animation-delay: 0.7s;
}
#rotate_06{
	-webkit-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	margin-left:68px;
	margin-top:-8px;
 	-webkit-animation-delay: 0.8s;
}
#rotate_07{
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	margin-left:-43px;
	margin-top:2px;
 	-webkit-animation-delay: 0.9s;
}
#rotate_08{
	-webkit-transform:rotate(-135deg);
	-moz-transform:rotate(-135deg);
	margin-left:-72px;
	margin-top:-8px;
 	-webkit-animation-delay: 1s;
}

@-webkit-keyframes fade{
	0%{background-color:#333;}
	100%{background-color:#efefef;}
}
/***************************** facebook **********************************/
#facebook{
	margin-top:30px;
	float:left;
}
.facebook_block{
	background-color:#9FC0FF;
	border:2px solid #3B5998;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
	-webkit-animation-name: bounce;
 	-webkit-animation-duration: 1s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0.1;
	-webkit-transform:scale(0.7);
	}
#block_1{
 	-webkit-animation-delay: .3s;
 }
#block_2{
 	-webkit-animation-delay: .4s;
}
#block_3{
 	-webkit-animation-delay: .5s;
}
@-webkit-keyframes bounce{
	0%{-webkit-transform: scale(1.2);opacity:1;}
	100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
/***************************** facebook like circle **********************************/
#circle{
	margin-top:40px;
		float:left;
}
.circle{
	background-color:#CCC;
	float:left;
	height:15px;
	margin-left:8px;
	width:15px;
	-webkit-animation-name: bounce_circle;
	-webkit-border-radius:10px;
 	-webkit-animation-duration: 1.5s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0.3;
}
#circle_1{
 	-webkit-animation-delay: .3s;
 }
#circle_2{
 	-webkit-animation-delay: .7s;
}
#circle_3{
 	-webkit-animation-delay: .9s;
}
@-webkit-keyframes bounce_circle{
	0%{opacity:0.3;}
	50%{opacity:1;background-color:#111}
	100%{opacity:0.3;}
}
/***************************** circular **********************************/
#circular{
	margin-top:15px;
	width:64px;
	float:left;
}
.circular{
	background-color:#5FB7FF;
	float:left;
	width:15px;	
	height:15px;	
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-webkit-animation-name: bounce_circular;
 	-webkit-animation-duration: 0.7s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	}
#circular_1{
	margin-top:25px;
 	-webkit-animation-delay: .3s;
}
#circular_2{
	margin-left:-8px;
	margin-top:9px;
 	-webkit-animation-delay: .4s;
}
#circular_3{
	margin-top:1px;
 	-webkit-animation-delay: .5s;
}
#circular_4{
	margin-left:0;
	margin-top:9px;
 	-webkit-animation-delay: .6s;
}
#circular_5{
	margin-left:-8px;
	margin-top:25px;
 	-webkit-animation-delay: .7s;
}
#circular_6{
	margin-left:-22px;
	margin-top:40px;
 	-webkit-animation-delay: .8s;
}
#circular_7{
	margin-left:-37px;
	margin-top:48px;
 	-webkit-animation-delay: .9s;
}
#circular_8{
	margin-left:-53px;
	margin-top:41px;
 	-webkit-animation-delay: 1s;
}
@-webkit-keyframes bounce_circular{
	0%{-webkit-transform:scale(1);}
	100%{-webkit-transform:scale(.3);}
}

/*************************** Bar line ******************************/
#outer-bar{
	height:20px;
	margin-top:38px;
	width:70px;
	border:1px solid #222;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	overflow:hidden;
	background-color:#dfdfdf;
	float:left;
	
}

.bar-line{
	background-color:#888;
	float:left;
	width:10px;	
	height:55px;
	margin-right:13px;
	margin-top:-15px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	}
.bar-animation{
	margin-left:92px;
	width:92px;
	-webkit-animation-name: bar-animation;
 	-webkit-animation-duration: 1.5s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
}	
#front-bar{
}

@-webkit-keyframes bar-animation{
	0%{margin-left:85px;margin-top:10px;}
	100%{margin-left:-70px;margin-top:-20px;}
}

Facebook 风格：

HTMl

<div id='facebook' >
  <div id='block_1' class='facebook_block'></div>
  <div id='block_2' class='facebook_block'></div>
  <div id='block_3' class='facebook_block'></div>
</div>

CSS

#facebook {
	margin-top: 30px;
	float: left;
}
.facebook_block {
	background-color: #9FC0FF;
	border: 2px solid #3B5998;
	float: left;
	height: 30px;
	margin-left: 5px;
	width: 8px;
	opacity: 0.1;
	-webkit-transform: scale(0.7);
	-webkit-animation-name: facebook;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: linear;
}
#block_1 {
	-webkit-animation-delay: .3s;
}
#block_2 {
	-webkit-animation-delay: .4s;
}
#block_3 {
	-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook {
 0% {
-webkit-transform: scale(1.2);
opacity:1;
}
 100% {
-webkit-transform: scale(0.7);
opacity:0.1;
}
}

× 任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

2元 5元 10元 50元 100元 意思一下

任刚（rengang.com.cn）整理分享，欣赏作品版权均归原作者所有，仅供学习交流。点击上方图标与好友分享！