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

这篇具有很好参考价值的文章主要介绍了为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

效果图 :

为你的网站加上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 里面填写的是毫秒数

本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)文章来源地址https://www.toymoban.com/news/detail-486607.html

到了这里,关于为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包