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

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

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

附上源码：

<!--添加公告栏时钟-->
<divid="clockdiv"><canvasid="dom"width="120"height="120">时钟canvas</canvas>
</div>
<scripttype="text/javascript"src="https://files.cnblogs.com/files/shwee/clock.js"></script><p>签名：</p>
<blockquote><bstyle="front-family:verdana;color:red"><br/>"书不记，熟读可记;义不精，细思可精;惟有志不立，直是无着力处。"<br/><br/></b></blockquote>
<hr/><!--把“XXXXXXXX”替换成你的QQ号-->
<atarget="_blank"href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1024593536"target="_blank""><imgborder="0"src="http://wpa.qq.com/pa?p=1:10245935:13"alt="有事您Q我"title="有事您Q我"></a><embedsrc="//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<ahref="mailto:1024593536@qq.com">Mayfly</a><p>(点击发送邮件)</p><br/>
</address><ahref="https://info.flagcounter.com/XRTq"><imgsrc="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><!--为页面添加爱心特效-->
<scripttype="text/javascript">(function(window,document,undefined){varhearts=[];window.requestAnimationFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){setTimeout(callback,1000/60);
}})();init();functioninit(){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();}functiongameloop(){for(vari=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);}functionattachEvent(){varold= typeofwindow.onclick==="function" &&window.onclick;window.onclick= function(event){old&&old();createHeart(event);}}functioncreateHeart(event){vard=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);}functioncss(css){varstyle=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);}functionrandomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}})(window,document);</script><linkhref="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"type="text/css"><linkhref="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"type="text/css"></div></div>

body {color: #000;background: url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) fixed;background-size: cover;background-repeat: repeat;font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;font-size: 12px;min-height: 101%;
}
#blogTitle h1 {font-size: 50px;font-family: Consolas;font-weight: bold;font-style: italic;margin-top: 20px;
}
.catListTitle {margin-top: 21px;margin-bottom: 10.5px;text-align: left;border-left: 10px solid rgba(82, 168, 236, 0.8);padding: 5px 0 5px 10px;background-color: rgba(245,245,245,0.3);
}
#home {margin: 0 auto;width: 65%;min-width: 950px;background-color: rgba(255,255,255,0.8);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {background: none;margin-bottom: 35px;word-wrap: break-word;
}
#blog-calendar td {font-size: 12px;font-family: Consolas;
}
.input_my_zzk {border: 1px solid #ccc;background: none;width: 100%;height: 25px;padding-right: 30px;padding-left: 5px;outline: 0;
}
.CalDayHeader {background: rgba(245,245,245,0.3) !important;font-weight: 100;color: #5E5F63;
}
.CalTitle {background: none;width: 100%;height: 25px;text-align: center;font-size: 14px;font-weight: bold;padding: 5px 0;color: #FFF;
}
.CalTitle td {background: rgba(245,245,245,0.3) !important;border: 0px !important;color: #5E5F63;font-family: "Comic Sans MS";
}
a:link {color: cornflowerblue;
}
a:visited {color: cornflowerblue;
}
a:hover {color:cadetblue;
}
a:active {color:black;
}
.CalTodayDay {background: rgba(247,247,247,0.3) !important;color: #FFF;font-weight: bold;
}
.cnblogs_code {background-color: rgba(247,247,247,0.3);font-family: Consolas !important;font-size: 12px!important;border: 1px solid #ccc;padding: 5px 10px;overflow: auto;margin: 5px 0;color: #000;
}
.cnblogs_code div {background-color: rgba(247,247,247,0.3);
}
.cnblogs_code_collapse {border-right: gray 1px solid;border-top: gray 1px solid;border-left: gray 1px solid;border-bottom: gray 1px solid;background-color: rgba(247,247,247,0.3);padding: 2px;
}
blockquote {background: rgba(247,247,247,0.3);border: 2px solid #efefef;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;margin-top: 10px;margin-bottom: 10px;
}
div.commentform input.author, div.commentform input.email, div.commentform input.url {background-image: url(http://static.cnblogs.com/images/icon_form.gif);border: 1px solid white !important;padding: 4px 4px 4px 30px;width: 300px;font-size: 13px;background-color: rgba(247,247,247,0.3);
}
#comment_form_container .comment_textarea {width: 362px;height: 200px;font-size: 13px;padding: 8px;margin-bottom: 10px;color: #555;border: 1px solid white;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background-color: rgba(247,247,247,0.3);
}
.cnblogs_code pre {
font-family: Consolas !important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}
.cnblogs_code span {
font-family: Consolas !important;
font-size: 12px!important;
line-height: 1.5!important;
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}
.feedbackItem {margin: 10px 5px 0px;padding: 5px;box-shadow: 0 0 10px 0 #AAA;
}
#topics .postTitle {font-size:230%;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {color: #21759b;transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#cnblogs_post_body h2 {border-left: 10px solid rgba(82, 168, 236, 0.3);background: rgba(247,247,247, 0.3);padding: 3px 10px;
}
#cnblogs_post_body h3{border-left: 5px solid rgba(0, 235, 255, 0.3);padding: 2px 5px;background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{border-left: 5px solid rgba(222, 101, 114,0.3);padding-left: 5px;background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h1{background: rgba(247,247,247,0.3);border-left: 15px solid rgba(0, 122, 255, 0.3);padding: 3px 10px;font-size: 175%;border-right: 15px solid rgba(0, 122, 255, 0.3);
}
.buryit {display: none;
}
#div_digg {float: right;position: fixed;width: auto;bottom: 10px;left: 70%;margin-bottom: 10px;background: rgba(247,247,247,0.3);margin-right: 30px;font-size: 12px;box-shadow: 0 0 10px 0 #AAA;padding: 10px;border: 2px solid rgba(82, 168, 236, 0.8);text-align: center;margin-top: 10px;
}
textarea {background: rgba(247,247,247,0.3);
}
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}#navigatorTitleDiv
{padding: 3px;position: fixed;top:244px; right:304px;font-weight:bold;cursor:pointer;background-color: antiquewhite;
}#navigatorDiv
{border-style:double;padding: 10px;padding-top:30px;position: fixed;top:240px; right:300px;background-color: antiquewhite;
}<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>Three.js自定义图像悬停</title><style>html{margin:0;padding:0;
}html,
body{width:100%;height:100%;margin:0px;padding:0px;font-family:'Lato', sans-serif;font-size:16px;
}.social-icon a{position:fixed;background:white;color:white;display:inline-block;width:100px;height:100px;transform:translate(-50%, -50%) rotate(45deg);transition:.15s ease;z-index:30;
}.social-icon i{position:absolute;font-size:1.8em;pointer-events:none;z-index:1000;
}.social-icon:hover a{transform:translate(-50%, -50%) rotate(45deg) scale(1.05);
}.youtube a{top:100%;left:0%;box-shadow:0px 0px 15px 5px rgba(230, 33, 23, 0.5);
}.youtube i{left:8px;bottom:8px;color:#E62117;
}.github a{top:100%;left:100%;box-shadow:0px 0px 15px 3px rgba(126, 126, 126, 0.5);
}.github i{right:8px;bottom:8px;
}#canvas-container-1{height:100%;width:100%;background:black;
}#canvas-1{display:block;position:relative;top:50%;left:50%;transform:translate(-50%, -50%);
}#site-link{color:#0099ff;display:inline-block;position:fixed;bottom:4%;left:50%;transform:translate(-50%, 0%);font-variant:small-caps;
}/*定制返回顶部按键*/#toTop{background:url(//http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_toTop.bmp) no-repeat 0px top;width:57px;height:57px;overflow:hidden;position:fixed;right:180px;bottom:20px;cursor:pointer;
}/*定制推荐和反对按键*/#div_digg{position:fixed;bottom:-10px;width:120px;right:20px;box-shadow:0 0 6px #0000FF;border:2px solid #FF0000;padding:4px;background-color:#fff;border-radius:4px 4px 4px 4px !important;
}.icon_favorite{background:transparent url('http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif') no-repeat 0 0;padding-left:15px;
}#blog_post_info_block a{text-decoration:none;color:#5B9DCA;padding:3px;
}/*定制公告栏时钟位置*/#clockdiv{/*left, center, right*/text-align:center;
}<!-- 为页面添加爱心特效 -->
<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.οnclick==="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>

<!DOCTYPE html>
<html>
<body><style>#Canvas{position:fixed;top:0px;left:0px;
}
</style><canvasid="Canvas"></canvas><style>#nav{width:150px;height:400px;border:1px solid #D4CD49;position:fixed;left:0;top:30%}
</style><script>window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/10);};varW=document.body.scrollWidth,H=document.body.scrollHeight;varca=document.getElementById("Canvas"),el=ca.getContext("2d");varnum=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;varx=newArray(),y=newArray(),speed=newArray(),angle=newArray(),t=newArray(),TT=newArray();varimg1=newImage(),img2=newImage(),img3=newImage(),img4=newImage();functionRandomNum(Min,Max){varRange=Max-Min;varRand=Math.random();return(Min+Math.round(Rand*Range));}functionRandomReal(Min,Max){returnMin+(Max-Min)*Math.random();}functionabs(W){returnW<=0?-W:W;}functiondrawtail(px,py,an){an=Math.atan(an);for(vari=0;i<10;i++){varX,Y;Y=Math.sqrt(RandomReal(0,lline*lline));X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);Y=lline-Y;X+=10;el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);}}functiondrawstar(px,py,ti){if(ti==1) el.drawImage(img1,px,py,20,20);elseif(ti==2) el.drawImage(img2,px,py,20,20);elseif(ti==3) el.drawImage(img3,px,py,20,20);elseif(ti==4) el.drawImage(img4,px,py,20,20);}functiondrawline(sx,sy,px,py){el.beginPath();el.moveTo(sx,sy);el.lineTo(px,py);el.stroke();el.closePath();}functiondis(sx,sy,px,py){returnMath.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));}functionwork(timestamp){if(RandomNum(0,5)==0){x.push(RandomNum(0,W));y.push(RandomNum(0,H));t.push(0);TT.push(RandomNum(3,10));speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));for(;;){if(Math.random()<=0.7) y[num]=0;else{y[num]%=200;if(Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);elsex[num]=W-1,angle[num]=-abs(angle[num]);}vari;for(i=0;i<num;i++)if(dis(x[i],y[i],x[num],y[num])<20)break;if(i==num)break;x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);}num++;}el.clearRect(0,0,W,H);el.fillStyle="#7B68EE";vartmp;for(vari=0;i<num;i++)for(varj=i+1;j<num;j++)if(dis(x[i],y[i],x[j],y[j])<20){tmp=speed[i];speed[i]=speed[j];speed[j]=tmp;tmp=angle[i];angle[i]=angle[j];angle[j]=tmp;}for(vari=0;i<num;i++){//el.fillRect(x[i],y[i],10,10);
drawtail(x[i],y[i],angle[i]);drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);t[i]++;if(y[i]>=H||x[i]<0||x[i]>=W){num--;x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();i--;}}timer=requestAnimationFrame(work);}timer=requestAnimationFrame(work);varsta=1;functioncontrol(){if(sta==1){cancelAnimationFrame(timer);ca.style.opacity="0";sta=0;}else{timer=requestAnimationFrame(work);ca.style.opacity="1";sta=1;}}functionShowTab(){dx=document.getElementById("MagicArray");if(dx.style.width=="200px"){dx.style.width="0px";dx.style.height="0px";dx.style.bottom="100px";dx.style.right="100px";dx.style.transform="rotate(0deg)";}else{dx.style.width="200px";dx.style.height="200px";dx.style.bottom="0px";dx.style.right="0px";dx.style.transform="rotate(180deg)";}dy=document.getElementsByName("Tab");for(vari=0;i<y.length;i++){dx=dy[i];if(dx.style.fontSize=="15px"){dx.style.fontSize="0px";dx.style.transitionDelay="0s";}else{dx.style.fontSize="15px";dx.style.transitionDelay="0.8s";}}}functionShowPicture(){dx=document.getElementById("main");if(dx.style.opacity=="0") dx.style.opacity="0.9";elsedx.style.opacity="0";}functionChangePicture(){dx=document.body;dy=RandomNum(0,14);if(dy==0){dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==1){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_picture1.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==2){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_ghostblade_by_wlop_d8i94nx-fullview.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==3){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_164404qas98559n01slq07.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==4){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==5){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dba1c7d-ef42bfde-ec75-42d3-8e77-0534f4bcc528.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==6){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dbjz9lh-829f3d6d-50d3-404d-bcd9-9099e59076e2.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==7){dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_dc4f3ik-1183f349-fc4f-4b07-a3e3-2b238ddb9adb.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==8){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dcauzp2-3acd9be8-5ac6-4747-9b72-f95fe1c3c730.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==9){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_fall_by_wlop_dbmfxto-fullview.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==10){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dccxg4s-28ec7113-ec88-4688-96f0-dd8c28e587f5.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==11){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_WLOP%20%e9%ac%bc%e5%88%80%20%e5%b0%8f%e7%bb%bf%204K%e5%a3%81%e7%ba%b8.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==12){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_wlop%e9%ac%bc%e5%88%80%e9%ab%98%e6%b8%85%e5%a3%81%e7%ba%b81920x1241.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==13){dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_%e5%a5%b3%e5%ad%a9%e5%92%8c%e7%8c%ab6k%e5%8a%a8%e6%bc%ab%e5%9b%be%e7%89%87.jpg) no-repeat fixed";dx.style.backgroundSize="cover";}else if(dy==14){dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_627cdf7f0c228c9748674e157a179820.png) no-repeat fixed";dx.style.backgroundSize="cover";}}ChangePicture();</script></body>
</html>

源码下载地址：https://www.lanzous.com/i2a123i

附加（可以自行选择添加）：

仓鼠，小狗等插件源码获取地址：http://abowman.com/

博客时钟：http://www.blogclock.cn/index.aspx

我右上角的旋转方块代码

<style type="text/css">html,body{height:120%;}.wrap{height:50%;position:relative;-webkit-transform-style:preserve-3d;-webkit-perspective:0px;-moz-transform-style:preserve-3d;-moz-perspective:0px;-webkit-animation:mydhua 5s ease infinite;-moz-animation:mydhua 5s ease infinite;}.box{width:150px;height:150px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;line-height:200px;text-align:center;font-size:48px;color:white;}.box1{-webkit-transform:rotatey(90deg) translatez(-75px);-moz-transform:rotatey(90deg) translatez(-75px);background:rgba(139, 139, 205, 0.5);}.box2{-webkit-transform:rotatey(90deg) translatez(75px);-moz-transform:rotatey(90deg) translatez(75px);background:rgba(178, 170, 113, 0.59);}.box3{-webkit-transform:rotatex(90deg) translatez(75px);-moz-transform:rotatex(90deg) translatez(75px);background:rgba(190, 136, 136, 0.5);}.box4{-webkit-transform:rotatex(90deg) translatez(-75px);-moz-transform:rotatex(90deg) translatez(-75px);background:rgba(0,204,255,.5);}.box5{-webkit-transform:translatez(-75px);-moz-transform:translatez(-75px);background:rgba(153,204,255,.5);}.box6{-webkit-transform:translatez(75px);-moz-transform:translatez(75px);background:rgba(0,255,255,.5);}@-webkit-keyframes mydhua{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin:center center;}100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin:center center; }}@-moz-keyframes mydhua{0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin:center center;}100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin:center center;}}img{border-radius:10px;}</style>

<divclass="wrap"><divclass="box1 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(14).png"></img></div><divclass="box2 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img></div><divclass="box3 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(8).png"></img></div><divclass="box4 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(6).png"></img></div><divclass="box5 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(40).png"></img></div><divclass="box6 box"><imgsrc="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img></div>
</div>

这里面的图片可以自己选择，但是要注意大小哦，如果做博客园博客的美化可以直接把图片放相册，如果是私人博客美化，可以选择床图。