为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

效果图 :

111.png

教程开始

新建一个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 里面填写的是毫秒数

本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)

下载说明:

1.本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。

2.如果源码下载地址失效请/联系站长QQ进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码源码ui网】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容,购买即以为着您同意上述内容。

源码UI网 » 为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程

发表回复