為你的網(wǎng)站加上Loading等待加載效果吧 | Loading頁面加載添加教程

效果圖 :

教程開始

新建一個loading樣式css
將以下代碼放進去 然后引用這個文件

code

1. #Loadanimation{
   ? ?background-color:#fff;
   ? ?height:100%;
   ? ?width:100%;
   ? ?position:fixed;
   ? ?z-index:1;
   ? ?margin-top:0px;top:0px;
   ? ?
   }
   #Loadanimation-center{
   ? ?width:100%;
   ? ?height:100%;
   ? ?position:relative;
   ? ?
   }
   #Loadanimation-center-absolute{
   ? ?position:absolute;
   ? ?left:50%;
   ? ?top:50%;
   ? ?height:200px;
   ? ?width:200px;
   ? ?margin-top:-100px;
   ? ?margin-left:-100px;
   ? ?
   }
   .xccx_object{
   ? ?-moz-border-radius:50% 50% 50% 50%;
   ? ?-webkit-border-radius:50% 50% 50% 50%;
   ? ?border-radius:50% 50% 50% 50%;
   ? ?position:absolute;
   ? ?border-left:5px solid #87CEFA;
   ? ?border-right:5px solid #FFC0CB;
   ? ?border-top:5px solid transparent;
   ? ?border-bottom:5px solid transparent;
   ? ?-webkit-animation:animate 2.5s infinite;
   ? ?animation:animate 2.5s infinite;
   ? ?
   }
   #xccx_one{
   ? ?left:75px;
   ? ?top:75px;
   ? ?width:50px;
   ? ?height:50px;
   ? ?
   }
   #xccx_two{
   ? ?left:65px;
   ? ?top:65px;
   ? ?width:70px;
   ? ?height:70px;
   ? ?-webkit-animation-delay:0.1s;
   ? ?animation-delay:0.1s;
   ? ?
   }
   #xccx_three{
   ? ?left:55px;
   ? ?top:55px;
   ? ?width:90px;
   ? ?height:90px;
   ? ?-webkit-animation-delay:0.2s;animation-delay:0.2s;
   ? ?
   }
   #xccx_four{
   ? ?left:45px;
   ? ?top:45px;
   ? ?width:110px;
   ? ?height:110px;
   ? ?-webkit-animation-delay:0.3s;
   ? ?animation-delay:0.3s;
   ? ?
   }
   @-webkit-keyframes animate{50%{
   ? ?-ms-transform:rotate(180deg);
   ? ?-webkit-transform:rotate(180deg);
   ? ?transform:rotate(180deg);
   ? ?
   }
   100%{-ms-transform:rotate(0deg);
   ? ?-webkit-transform:rotate(0deg);
   ? ?transform:rotate(0deg);
   ? ?
   }
   ? ?
   }
   @keyframes animate{50%{
   ? ?-ms-transform:rotate(180deg);
   ? ?-webkit-transform:rotate(180deg);
   ? ?transform:rotate(180deg);
   ? ?
   }
   100%{
   ? ?-ms-transform:rotate(0deg);
   ? ?-webkit-transform:rotate(0deg);
   ? ?transform:rotate(0deg);
   ? ?
   }
   }

第二步：

將以下代碼填寫入頭部文件 一般都為?header.php

code

1. <div id="Loadanimation" style="z-index:999999;">
   <div id="Loadanimation-center">
   ? ?<div id="Loadanimation-center-absolute">
   ? ? ? ?<div class="xccx_object" id="xccx_four"></div>
   ? ? ? ?<div class="xccx_object" id="xccx_three"></div>
   ? ? ? ?<div class="xccx_object" id="xccx_two"></div>
   ? ? ? ?<div class="xccx_object" id="xccx_one"></div>
   ? ?</div>
   </div>
   </div>
   <script>
   $(function(){
   ? ?$("#Loadanimation").fadeOut(540);
   });
   </script>

注意 注意?fadeOut?里面填寫的是毫秒數(shù)

本loading可以自定義 網(wǎng)上也有很多css的 只要替換第二步的代碼都可以成功(JS代碼別替換)文章來源地址http://www.zghlxwxcb.cn/news/detail-486607.html

到了這里，關于為你的網(wǎng)站加上Loading等待加載效果吧 | Loading頁面加載添加教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！