Typecho主题加上loading效果教程

Jaysun

温馨提示:这篇文章已超过378天没有更新,请注意相关的内容是否还可用!

当点击网页进入时会有一个lading跳转动画页面,在网站打开速度较慢或是其他情况时,加载页面能降低访问者关闭网页的几率,喜欢的根据网站自己的需求使用吧,效果图如下

1.jpg

教程开始

第一步:

新建一个loading样式CSS
将以下代码放进去 然后引用这个文件

隐藏内容
评论可见
前往评论

第二步:

将以下代码填写入头部文件 一般都为 header.php

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

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 5 条评论,649人围观)
网友昵称:5552325@qq.com
5552325@qq.com V 普通用户 Google Chrome 122.0.0.0 Windows 10 x64 地板
03-22 来自广东 回复
感谢分享
网友昵称:603601857
603601857 V 普通用户 Google Chrome 107.0.0.0 Android 13 凉席
2023-09-08 来自广东 回复
看看
网友昵称:torhumar
torhumar V 普通用户 Google Chrome 116.0.0.0 Windows 10 x64 板凳
2023-08-31 来自新疆 回复
好看看
网友昵称:252100
252100 V 普通用户 Safari 14.1.2 Apple iPhone 椅子
2023-07-22 来自广西 回复
看看好主意
网友昵称:jinqike1026
jinqike1026 V 普通用户 Google Chrome 86.0.4240.198 Windows 10 x64 沙发
2023-03-17 来自云南 回复
感谢分享[Fabulous]

目录[+]

取消
微信二维码
微信二维码
支付宝二维码