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

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

第一步:

新建一个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

打赏

海报

正在生成.....

评论 (25)

语录
取消
  1. 头像
    云奚小屋 Lv.1
    ·Windows 10 · Google Chrome
    沙发

    大家热爱的事物,擅长的事物都不同,都拥有自己的世界,一个人一个世界,这些互相连接的话,就会展开许多的可能性,广大、未知,就像是宇宙一样。

    回复 删除 垃圾
  2. 头像
    DucVietCode Lv.1
    ·iPhone · Safari
    板凳

    游戏是儿童最正当的行为,玩具是儿童的天使。

    回复 删除 垃圾
  3. 头像
    听冬酱 Lv.3
    ·Android · Google Chrome
    地毯

    滚圆的东西咕噜咕噜往哪滚去都不费力,四棱的东西想要让他滚,不但费力还很痛的

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

    山河远阔,人间烟火,无一是你,无一不是你。

    回复 删除 垃圾
  5. 头像
    华纯网络科技 Lv.1
    ·Windows 10 · Google Chrome
    第5楼

    我要写出只属于半田清舟的字

    回复 删除 垃圾
  6. 头像
    还不是睡觉时间 Lv.1
    ·Android · Google Chrome
    第6楼

    下定决心,即意味着寄托自己的命运与此之上

    回复 删除 垃圾
  7. 头像
    linxiyy Lv.1
    ·Windows 10 · Google Chrome
    第7楼

    故事的结束总是满载而归,就是金榜题名q

    回复 删除 垃圾
  8. 头像
    小林 Lv.1
    ·Windows 10 · Google Chrome
    第8楼

    和他相遇一定是命中注定,如果不是的话,我就不再相信命运了.

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

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

    回复 删除 垃圾
  10. 头像
    玖华. Lv.0
    ·Windows 10 · Google Chrome
    第10楼

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

    回复 删除 垃圾
  11. 头像
    网络跳越 Lv.3
    ·MacOS · Google Chrome
    第11楼

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

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

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

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

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

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

    优雅,永不过时。

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

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

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

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

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

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

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

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

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

    今天也要开心哟~

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

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

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

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

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

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

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

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

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

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

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

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

    回复 删除 垃圾