页面加载loading动画特效代码

代码介绍

1.代码设置成功以后就会有页面加载动画 特效 ，不管你是进去主页面还是进入文章，都是会 自动 刷新显示动画的！
2.其实这个你们用 插件 设置也可以，但是我不建议，因为那样 网站 会很卡，所以你们不嫌麻烦还是用代码来实现吧！
3.代码有 两款 ， 第一款 就是本站现在用的白红相间没有背景，还有 第二款 就是有背景白色的，代码我发在下面自行测试，喜欢哪个用哪个即可！
4.想用插件也可以去本站首页置顶文章获取！

代码安装

1.放入主题的 header.php 文件最顶部即可！
{mtitle}代码演示{/mtitle}
代码演示截图的是我现在用的

{mtitle}代码分享{/mtitle}

第一款

<style>#PageLoading{background-color:fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}#PageLoading-center{width:100%;height:100%;position:relative;}#PageLoading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.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 #000;border-right:5px solid #FF0000;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2s infinite;animation:animate 2s infinite;}#object_one{left:75px;top:75px;width:50px;height:50px;}#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#object_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);}}</style>

<div id="PageLoading" style="z-index:999999;">
        <div id="PageLoading-center">
            <div id="PageLoading-center-absolute">
                <div class="object" id="object_four"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_one"></div>
            </div>
        </div>
    </div>

---

第二款

<style>#PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}#PageLoading-center{width:100%;height:100%;position:relative;}#PageLoading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.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 #000;border-right:5px solid #000;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2s infinite;animation:animate 2s infinite;}#object_one{left:75px;top:75px;width:50px;height:50px;}#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#object_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);}}</style>
 
 <div id="PageLoading" style="z-index:999999;">
        <div id="PageLoading-center">
            <div id="PageLoading-center-absolute">
                <div class="object" id="object_four"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_one"></div>
            </div>
        </div>
    </div>

温馨提示：还有一段代码！

需要将以下代码放入header.php</header> 之前即可

<script>$(function(){ $("#PageLoading").fadeOut(530); });  </script>