這是一組效果非常炫酷的CSS3頁面預加載loading動畫特效。該特效共有30種不同的loading效果。所有的加載動畫都是使用CSS3來完成，jQuery代碼只是用于隱藏加載動畫。當你點擊頁面的任何一個地方時，loading動畫就會被隱藏。

這30種loading動畫分為3組：方形加載動畫特效、圓形加載動畫特效和長條形加載動畫特效。每一種效果都有一個單獨的頁面，你可以對應查看每種效果的CSS代碼。

制作方法

HTML結構

下面是第一種效果的制作方式。所有的DEMO都是使用嵌套div的HTML結構。在第一個DEMO中，嵌套了4層div元素，其中最里層的div#object是用于動畫的元素。

	
<div id="loading">
  <div id="loading-center">
    <div id="loading-center-absolute">
      <div id="object"></div>
    </div>
  </div>
</div>  

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

CSS樣式

首先要設置最外層的div的定位方式為固定定位方式，這樣方便它里面的元素制作各種動畫效果。

#loading{
  background-color: #bd4932;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
}   

接著分別設置第二層和第三層div元素。第二層div元素設置為相對定位，寬度和高度均為100%。第三層div是實際動畫元素的包裹元素，它設置為絕度定位，并且位置居中。

#loading-center{
  width: 100%;
  height: 100%;
  position: relative;
}
#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;
}               

最后，使用keyframes幀動畫使div#object元素動起來，@-webkit-keyframes animate是為了兼容webkit內核的瀏覽器。@keyframes animate則是為了兼容IE瀏覽器。

#object{
  width: 80px;
  height: 80px;
  background-color: #FFF;
  -webkit-animation: animate 1s infinite ease-in-out;
  animation: animate 1s infinite ease-in-out;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
}
@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
  
@keyframes animate {
  0% {
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
  } 50% {
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% {
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}               

JAVASCRIPT

插件中還使用了一些jQuery代碼來隱藏loading效果。

$(window).load(function() {
  $("#loading-center").click(function() {
  $("#loading").fadeOut(500);
  })   
});      

在實際應用中，你可能需要這樣使用這些Loading效果：

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

上面的代碼表示在頁面加載完成之后0.5秒的時間內將loading動畫淡入淡出隱藏起來。

當然使用這些需要加載jq

http://www.htmleaf.com/css3/css3donghua/201504151682.html

轉載請注明出處 AE博客|墨淵 ? 30種CSS3炫酷頁面預加載loading動畫特效及使用教程