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動畫淡入淡出隱藏起來。