发帖
手机端
扫码访问
 立即注册
 登录
QQ登陆
锐谷论坛»论坛 › 建站话题 › Typecho › Typecho主题添加Loading效果
返回列表 发新帖
查看: 212|回复: 0

[技术教程] Typecho主题添加Loading效果

[复制链接]
admin
  • 打卡等级：常驻代表
  • 打卡总天数：49
  • 打卡月天数：0
  • 打卡总奖励：383
  • 最近打卡：2025-08-20 09:34:54
发表于 2025-7-21 15:09:34 | 显示全部楼层 |阅读模式
为了提升用户体验，网站添加Loading加载效果至关重要。加载效果需具备视觉吸引、加载速度、交互性、兼容性和简洁性等特点。本文将为您介绍如何在网站中实现一个美观且实用的Loading加载效果。

方案一
1、新建Loading样式的css文件。放入以下内容，并引用
  1. #Loadanimation{
  2.     background-color:#fff;
  3.     height:100%;
  4.     width:100%;
  5.     position:fixed;
  6.     z-index:1;
  7.     margin-top:0px;top:0px;
  8.    
  9. }
  10. #Loadanimation-center{
  11.     width:100%;
  12.     height:100%;
  13.     position:relative;
  14.    
  15. }
  16. #Loadanimation-center-absolute{
  17.     position:absolute;
  18.     left:50%;
  19.     top:50%;
  20.     height:200px;
  21.     width:200px;
  22.     margin-top:-100px;
  23.     margin-left:-100px;
  24.    
  25. }
  26. .xccx_object{
  27.     -moz-border-radius:50% 50% 50% 50%;
  28.     -webkit-border-radius:50% 50% 50% 50%;
  29.     border-radius:50% 50% 50% 50%;
  30.     position:absolute;
  31.     border-left:5px solid #87CEFA;
  32.     border-right:5px solid #FFC0CB;
  33.     border-top:5px solid transparent;
  34.     border-bottom:5px solid transparent;
  35.     -webkit-animation:animate 2.5s infinite;
  36.     animation:animate 2.5s infinite;
  37.    
  38. }
  39. #xccx_one{
  40.     left:75px;
  41.     top:75px;
  42.     width:50px;
  43.     height:50px;
  44.    
  45. }
  46. #xccx_two{
  47.     left:65px;
  48.     top:65px;
  49.     width:70px;
  50.     height:70px;
  51.     -webkit-animation-delay:0.1s;
  52.     animation-delay:0.1s;
  53.    
  54. }
  55. #xccx_three{
  56.     left:55px;
  57.     top:55px;
  58.     width:90px;
  59.     height:90px;
  60.     -webkit-animation-delay:0.2s;animation-delay:0.2s;
  61.    
  62. }
  63. #xccx_four{
  64.     left:45px;
  65.     top:45px;
  66.     width:110px;
  67.     height:110px;
  68.     -webkit-animation-delay:0.3s;
  69.     animation-delay:0.3s;
  70.    
  71. }
  72. @-webkit-keyframes animate{50%{
  73.     -ms-transform:rotate(180deg);
  74.     -webkit-transform:rotate(180deg);
  75.     transform:rotate(180deg);
  76.    
  77. }
  78. 100%{-ms-transform:rotate(0deg);
  79.     -webkit-transform:rotate(0deg);
  80.     transform:rotate(0deg);
  81.    
  82. }
  83.    
  84. }
  85. @keyframes animate{50%{
  86.     -ms-transform:rotate(180deg);
  87.     -webkit-transform:rotate(180deg);
  88.     transform:rotate(180deg);
  89.    
  90. }
  91. 100%{
  92.     -ms-transform:rotate(0deg);
  93.     -webkit-transform:rotate(0deg);
  94.     transform:rotate(0deg);
  95.    
  96. }
  97. }
复制代码
2、将以下代码填写入头部文件（一般都是主题目录下的 header.php 文件）
  1. <div id="Loadanimation" style="z-index:999999;">
  2. <div id="Loadanimation-center">
  3.     <div id="Loadanimation-center-absolute">
  4.         <div class="xccx_object" id="xccx_four"></div>
  5.         <div class="xccx_object" id="xccx_three"></div>
  6.         <div class="xccx_object" id="xccx_two"></div>
  7.         <div class="xccx_object" id="xccx_one"></div>
  8.     </div>
  9. </div>
  10. </div>
  11. <script>
  12. $(function(){
  13.     $("#Loadanimation").fadeOut(540);
  14. });
  15. </script>
复制代码
注意： fadeOut 里面填写的是毫秒数
上面提供参考的Loading可以自定义替换，但js代码不能动。

方案二

1、给需要添加Loading加载动画效果的网站或网页引用jQuery库
  1. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
复制代码
2、将以下代码添加到 head 标签前
  1. <!-- 刷新加载动画 -->
  2. <div id="PageLoading" style="z-index:99999999999;">
  3.         <div id="PageLoading-center">
  4.             <div id="PageLoading-center-absolute">
  5.                 <div class="object" id="object_four"></div>
  6.                 <div class="object" id="object_three"></div>
  7.                 <div class="object" id="object_two"></div>
  8.                 <div class="object" id="object_one"></div>
  9.             </div></div></div>...
复制代码
3、将以下代码添加到 body 标签前
  1. <!-- 刷新加载动画 -->
  2. <script>
  3.     $(function(){ $("#PageLoading").fadeOut(530); });  
  4. </script>...
复制代码
4、新建css样式文件（比如：yjvc.css），并引用该文件
  1. #PageLoading {
  2.     background-color:#fff;
  3.     height:100%;
  4.     width:100%;
  5.     position:fixed;
  6.     z-index:1;
  7.     margin-top:0px;
  8.     top:0px;
  9. }
  10. #PageLoading-center {
  11.     width:100%;
  12.     height:100%;
  13.     position:relative;
  14. }
  15. #PageLoading-center-absolute {
  16.     position:absolute;
  17.     left:50%;
  18.     top:50%;
  19.     height:200px;
  20.     width:200px;
  21.     margin-top:-100px;
  22.     margin-left:-100px;
  23. }
  24. .object {
  25.     -moz-border-radius:50% 50% 50% 50%;
  26.     -webkit-border-radius:50% 50% 50% 50%;
  27.     border-radius:50% 50% 50% 50%;
  28.     position:absolute;
  29.     border-left:5px solid #87CEFA;
  30.     border-right:5px solid #FFC0CB;
  31.     border-top:5px solid transparent;
  32.     border-bottom:5px solid transparent;
  33.     -webkit-animation:animate 2.5s infinite;
  34.     animation:animate 2.5s infinite;
  35. }
  36. #object_one {
  37.     left:75px;
  38.     top:75px;
  39.     width:50px;
  40.     height:50px;
  41. }
  42. #object_two {
  43.     left:65px;
  44.     top:65px;
  45.     width:70px;
  46.     height:70px;
  47.     -webkit-animation-delay:0.1s;
  48.     animation-delay:0.1s;
  49. }
  50. #object_three {
  51.     left:55px;
  52.     top:55px;
  53.     width:90px;
  54.     height:90px;
  55.     -webkit-animation-delay:0.2s;
  56.     animation-delay:0.2s;
  57. }
  58. #object_four {
  59.     left:45px;
  60.     top:45px;
  61.     width:110px;
  62.     height:110px;
  63.     -webkit-animation-delay:0.3s;
  64.     animation-delay:0.3s;
  65. }
  66. @-webkit-keyframes animate {
  67.     50% {
  68.     -ms-transform:rotate(180deg);
  69.     -webkit-transform:rotate(180deg);
  70.     transform:rotate(180deg);
  71. }
  72. 100% {
  73.     -ms-transform:rotate(0deg);
  74.     -webkit-transform:rotate(0deg);
  75.     transform:rotate(0deg);
  76. }
  77. }@keyframes animate {
  78.     50% {
  79.     -ms-transform:rotate(180deg);
  80.     -webkit-transform:rotate(180deg);
  81.     transform:rotate(180deg);
  82. }
  83. 100% {
  84.     -ms-transform:rotate(0deg);
  85.     -webkit-transform:rotate(0deg);
  86.     transform:rotate(0deg);
  87. }
  88. }...
复制代码
原文地址：https://vjo.cc/118

网站加载效果
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表