WordPress 页面加载动画特效

当wordpress页面文件资源较多,加载较慢时,为避免浏览者等待时的枯燥感,我们考虑会在页面加入网页加载中特效,当网页加载完毕后加载提示消失。
一、在header.php里添加

1
<div id="circle"></div><div id="circle1"></div>

二、在footer.php里添加

1
2
3
4
5
6
    <script>
    jQuery(window).load(function() {
      jQuery("#circle").fadeOut(500);
      jQuery("#circle1").fadeOut(700);
    });
    </script>

三、最后添加CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
    /* 加载动画特效 */
    #circle {  
        background-color: rgba(0,0,0,0);  
        border:5px solid rgba(138,43,226,0.9);  
        opacity:.9;  
        border-right:5px solid rgba(0,0,0,0);  
        border-left:5px solid rgba(0,0,0,0);  
        border-radius:50px;  
        box-shadow: 0 0 35px #9a3ad1;  
        width:50px;  
        height:50px;  
            margin:0 auto;          
        position:fixed;  
            left:30px;  
            bottom:30px;  
        -moz-animation:spinPulse 1s infinite ease-in-out;  
        -webkit-animation:spinPulse 1s infinite ease-in-out;  
        -o-animation:spinPulse 1s infinite ease-in-out;  
        -ms-animation:spinPulse 1s infinite ease-in-out;  
     
    }  
    #circle1 {  
        background-color: rgba(0,0,0,0);  
        border:5px solid rgba(138,43,226,0.9);  
        opacity:.9;  
        border-left:5px solid rgba(0,0,0,0);  
        border-right:5px solid rgba(0,0,0,0);  
        border-radius:50px;  
        box-shadow: 0 0 15px #9a3ad1;    
        width:30px;  
        height:30px;  
            margin:0 auto;  
            position:fixed;  
            left:40px;  
            bottom:40px;  
        -moz-animation:spinoffPulse 1s infinite linear;  
        -webkit-animation:spinoffPulse 1s infinite linear;  
        -o-animation:spinoffPulse 1s infinite linear;  
        -ms-animation:spinoffPulse 1s infinite linear;  
    }  
    @-moz-keyframes spinPulse {  
        0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}  
        50% { -moz-transform:rotate(145deg); opacity:1; }  
        100% { -moz-transform:rotate(-320deg); opacity:0; }  
    }  
    @-moz-keyframes spinoffPulse {  
        0% { -moz-transform:rotate(0deg); }  
        100% { -moz-transform:rotate(360deg);  }  
    }  
    @-webkit-keyframes spinPulse {  
        0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }  
        50% { -webkit-transform:rotate(145deg); opacity:1;}  
        100% { -webkit-transform:rotate(-320deg); opacity:0; }  
    }  
    @-webkit-keyframes spinoffPulse {  
        0% { -webkit-transform:rotate(0deg); }  
        100% { -webkit-transform:rotate(360deg); }  
    }  
    @-o-keyframes spinPulse {  
        0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }  
        50% { -o-transform:rotate(145deg); opacity:1;}  
        100% { -o-transform:rotate(-320deg); opacity:0; }  
    }  
    @-o-keyframes spinoffPulse {  
        0% { -o-transform:rotate(0deg); }  
        100% { -o-transform:rotate(360deg); }  
    }  
    @-ms-keyframes spinPulse {  
        0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }  
        50% { -ms-transform:rotate(145deg); opacity:1;}  
        100% { -ms-transform:rotate(-320deg); opacity:0; }  
    }  
    @-ms-keyframes spinoffPulse {  
        0% { -ms-transform:rotate(0deg); }  
        100% { -ms-transform:rotate(360deg); }  
    }

实现效果:

给我留言