为你的Typecho主题加上loading效果吧

素颜
2023-03-12 / 17 评论 / 347 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年03月14日,已超过266天没有更新,若内容或图片失效,请留言反馈。
广告
教程开始

第一步:

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

效果图

lf527v2a.png

后言

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

本文共 99 个字数,平均阅读时长 ≈ 1分钟
广告
5

打赏

海报

正在生成.....

评论 (17)

语录
取消
  1. 头像
    1352 Lv.3
    ·Windows 10 · Google Chrome
    沙发

    风里有花香,身边有最爱的人。

    回复 删除 垃圾
  2. 头像
    玖华. Lv.0
    ·Windows 10 · Google Chrome
    板凳

    请问为什么我设置好之后打开网址是一直加载这个页面进不去的?

    回复 删除 垃圾
  3. 头像
    网络跳越 Lv.2
    ·MacOS · Google Chrome
    地毯

    我们各自努力,最高处见!

    回复 删除 垃圾
  4. 头像
    wa Lv.2
    ·Windows 10 · Google Chrome
    第4楼

    还可以想象一对热恋中的情人,互相一次次说“我一刻也不想离开你”,又互相一次次说“时间已经不早了”,时间不早了可我一刻也不想离开你,一刻也不想离开你可时间毕竟是不早了。

    回复 删除 垃圾
  5. 头像
    匿名 Lv.6
    ·Windows 10 · Google Chrome
    第5楼

    春城无处不飞花,寒食东风御柳斜。

    回复 删除 垃圾
  6. 头像
    6 Lv.2
    ·Windows 10 · Google Chrome
    第6楼

    优雅,永不过时。

    回复 删除 垃圾
  7. 头像
    123213212 Lv.1
    ·MacOS · Google Chrome
    第7楼

    走路太骚必摔跤,得瑟过劲会闪腰。

    回复 删除 垃圾
  8. 头像
    静鱼客栈 Lv.1
    ·Windows 10 · Google Chrome
    第8楼

    於此漆黑世界之中,直至光明遍地之时!All Hail Lelouch!

    回复 删除 垃圾
  9. 头像
    半成熟 Lv.1
    ·Windows 10 · Google Chrome
    第9楼

    生活就是和过去再见,和未来遇见!

    回复 删除 垃圾
  10. 头像
    Lv.1
    ·Windows 10 · FireFox
    第10楼

    古往传奇多少别离,我 只是不经意 遇到了你

    回复 删除 垃圾
  11. 头像
    yiki Lv.4
    ·Windows 10 · Google Chrome
    第11楼

    今天也要开心哟~

    回复 删除 垃圾
  12. 头像
    小王博客 Lv.6
    ·Windows 10 · Google Chrome
    第12楼

    我的容身之所,就是你的身边。

    回复 删除 垃圾
  13. 头像
    匿名 Lv.6
    ·Windows 10 · FireFox
    第13楼

    我是他的盾牌,我是他的利刃。我深知他,连同他的过去和未来。

    回复 删除 垃圾
  14. 头像
    55 Lv.1
    ·Android · UC Browser
    第14楼

    和我定下契约,成为魔法少女吧!

    回复 删除 垃圾
  15. 头像
    bbs.zuhaopu.top Lv.3
    ·Windows 10 · Google Chrome
    第15楼

    思悠悠,恨悠悠,恨到归时方始休。

    回复 删除 垃圾
  16. 头像
    666 Lv.4
    ·iPhone · Safari
    第16楼

    东风夜放花千树。更吹落、星如雨。

    回复 删除 垃圾
  17. 头像
    bbssxx Lv.6
    ·Android · Google Chrome
    第17楼

    生前哪管身后事,浪得几日是几日。

    回复 删除 垃圾