博客美化总结（持续更新）

这次对博客进行了美化，主要有：

1. 背景随机图片
2. 增加时钟，音乐等
3. 更改标签之间的距离
4. 网页模板更换

第一次弄，大部分借鉴于各位园友，实际上对CSS/HTML 也不是很懂--萌新求照顾，但“万丈高楼平地起”，后期加油，毕竟前端挺好玩的。

附上源码：

<!-- 添加公告栏时钟 -->
<div id="clockdiv">
    <canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

<p>签名：</p>
<blockquote ><b  style="front-family:verdana;color:red"><br />"书不记，熟读可记;义不精，细思可精;惟有志不立，直是无着力处。"<br /><br /></b></blockquote>
<hr />

<!--把“XXXXXXXX”替换成你的QQ号-->
<a target="_blank" href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1024593536" target="_blank""><img border="0" src="http://wpa.qq.com/pa?p=1:10245935:13" alt="有事您Q我" title="有事您Q我"></a>

<embed src="//music.163.com/style/swf/widget.swf?sid=29544794&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>

<p>我的微信在这~WMITLV【加好友请注明姓名和来源。】</p>

<address>
Written by <a href="mailto:1024593536@qq.com">Mayfly</a><p>(点击发送邮件)</p><br /> 
</address>
 
<a href="https://info.flagcounter.com/XRTq"><img src="https://s04.flagcounter.com/count2/XRTq/bg_FFFFFF/txt_0A0202/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>



<!-- 为页面添加爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
    var hearts = [];
    
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }

    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
    
})(window,document);
</script>



 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 


 
 



 
 
 
 <link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 
 



 
 </div></div>

侧边公告栏