WordPress 特效-页面加载动画圆圈Duang~

效果：

代码实现的效果：

你也可以自己DIY，，比如 我博客现在的动画效果。

代码

首先我们需要把CSS样式表代码插入主题的Style.css样式表之中

    /* 代码开始 morfans.cn 魔帆博客 */ 
    #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); }   
    }  

然后在页面头部公共代码header.php文件的后同样添加下列代码

最后添加jQuery渐隐效果，在全站底部脚本footer.php内的 前添加下列代码

如需更改颜色，请自行编辑代码中的138,43,226和#9a3ad1，颜色请看 [lhb href=’https://morfans.cn/rgb.html’]传送门[/lhb]