排行榜 统计
  • 文章总数:90 篇
  • 评论总数:39 条
  • 分类总数:5 个
  • 最后更新:11月27日

页面加载loading动画特效代码

本文阅读 2 分钟
首页 网站代码 正文

代码介绍

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>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://bk.11awz.cn/loading-1.html
-- 展开阅读全文 --
【SEO技术】一般网站二级目录与二级域名区别是什么?如何选择?
« 上一篇 04-24
一句命令绕过宝塔面板强制绑定账号
下一篇 » 04-24

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章