30种CSS3炫酷页面预加载loading动画特效

简要教程
　　这是一组效果非常炫酷的CSS3页面预加载loading动画特效。该特效共有30种不同的loading效果。所有的加载动画都是使用CSS3来完成，jQuery代码只是用于隐藏加载动画。当你点击页面的任何一个地方时，loading动画就会被隐藏。

　　这30种loading动画分为3组：方形加载动画特效、圆形加载动画特效和长条形加载动画特效。每一种效果都有一个单独的页面，你可以对应查看每种效果的CSS代码。

查看演示    下载插件

　　制作方法
　　HTML结构
　　下面是第一种效果的制作方式。所有的DEMO都是使用嵌套div的HTML结构。在第一个DEMO中，嵌套了4层div元素，其中最里层的div#object是用于动画的元素。

1. <div id="loading">
   
2.   <div id="loading-center">
   
3.     <div id="loading-center-absolute">
   
4.       <div id="object"></div>
   
5.     </div>
   
6.   </div>
   
7. </div>     

复制代码

　　外层的div元素主要用于定位。

　　CSS样式
　　首先要设置最外层的div的定位方式为固定定位方式，这样方便它里面的元素制作各种动画效果。

1. #loading{
   
2.   background-color: #bd4932;
   
3.   height: 100%;
   
4.   width: 100%;
   
5.   position: fixed;
   
6.   z-index: 1;
   
7.   margin-top: 0px;
   
8.   top: 0px;
   
9. }               

复制代码

　　接着分别设置第二层和第三层div元素。第二层div元素设置为相对定位，宽度和高度均为100%。第三层div是实际动画元素的包裹元素，它设置为绝度定位，并且位置居中。

1. #loading-center{
   
2.   width: 100%;
   
3.   height: 100%;
   
4.   position: relative;
   
5. }
   
6. #loading-center-absolute {
   
7.   position: absolute;
   
8.   left: 50%;
   
9.   top: 50%;
   
10.   height: 200px;
    
11.   width: 200px;
    
12.   margin-top: -100px;
    
13.   margin-left: -100px;
    
14. }               

复制代码

　　最后，使用keyframes帧动画使div#object元素动起来，@-webkit-keyframes animate是为了兼容webkit内核的浏览器。@keyframes animate则是为了兼容IE浏览器。

1. #object{
   
2.   width: 80px;
   
3.   height: 80px;
   
4.   background-color: #FFF;
   
5.   -webkit-animation: animate 1s infinite ease-in-out;
   
6.   animation: animate 1s infinite ease-in-out;
   
7.   margin-right: auto;
   
8.   margin-left: auto;
   
9.   margin-top: 60px;
   
10. }
    
11. @-webkit-keyframes animate {
    
12.   0% { -webkit-transform: perspective(160px); }
    
13.   50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
    
14.   100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
    
15. }
    
16.   
    
17. @keyframes animate {
    
18.   0% { 
    
19.     transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    
20.     -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
    
21.   } 50% { 
    
22.     transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    
23.     -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
    
24.   } 100% { 
    
25.     transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    
26.     -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    
27.   }
    
28. }               

复制代码

　　JAVASCRIPT
　　插件中还使用了一些jQuery代码来隐藏loading效果。

1. $(window).load(function() {
   
2.   $("#loading-center").click(function() {
   
3.   $("#loading").fadeOut(500);
   
4.   })    
   
5. });     

复制代码

　　在实际应用中，你可能需要这样使用这些Loading效果：

1. $(window).load(function() {
   
2.    $("#loading").fadeOut(500);
   
3. })  

复制代码

　　上面的代码表示在页面加载完成之后0.5秒的时间内将loading动画淡入淡出隐藏起来。

转载于:https://my.oschina.net/u/2345713/blog/504445