Typecho主题加上loading效果教程

adminVIP3永

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




教程开始
第一步：
新建一个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. }

复制代码

---

第二步：
将以下代码填写入头部文件 一般都为 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 里面填写的是毫秒数