网站美化特效-页面左下角加载动画圆圈Duang~

代码实现的效果，懂点基础的你也可以自己DIY。

首先在页面头部公共代码header.php文件里添加下列代码：

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

然后需要把CSS样式代码插入主题的Style.css样式表之中CSS代码：

/* 页面加载动画圆圈Duang */ 
#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); }   
    }

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

<script>
jQuery(window).load(function() {
jQuery("#circle").fadeOut(500);
jQuery("#circle1").fadeOut(700);
});
</script>