这次对博客进行了美化，主要有：
- 背景随机图片
- 增加时钟，音乐等
- 更改标签之间的距离
- 网页模板更换
第一次弄，大部分借鉴于各位园友，实际上对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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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>
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; 65%; min- 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; 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; 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; 300px; font-size: 13px; background-color: rgba(247,247,247,0.3); } #comment_form_container .comment_textarea { 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; 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> <meta charset="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.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>
<!DOCTYPE html> <html> <body> <style> #Canvas{ position:fixed; top:0px; left:0px; } </style> <canvas id="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);}; var W=document.body.scrollWidth,H=document.body.scrollHeight; var ca=document.getElementById("Canvas"),el=ca.getContext("2d"); var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20; var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array(); var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image(); function RandomNum(Min,Max){ var Range=Max-Min; var Rand=Math.random(); return(Min+Math.round(Rand * Range)); } function RandomReal(Min,Max){ return Min+(Max-Min)*Math.random(); } function abs(W){return W<=0?-W:W;} function drawtail(px,py,an){ an=Math.atan(an); for (var i=0;i<10;i++){ var X,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); } } function drawstar(px,py,ti){ if (ti==1) el.drawImage(img1,px,py,20,20);else if (ti==2) el.drawImage(img2,px,py,20,20);else if (ti==3) el.drawImage(img3,px,py,20,20);else if (ti==4) el.drawImage(img4,px,py,20,20); } function drawline(sx,sy,px,py){ el.beginPath(); el.moveTo(sx,sy); el.lineTo(px,py); el.stroke(); el.closePath(); } function dis(sx,sy,px,py){ return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy)); } function work(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]);else x[num]=W-1,angle[num]=-abs(angle[num]); } var i; 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"; var tmp; for (var i=0;i<num;i++) for (var j=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 (var i=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); var sta=1; function control(){ if (sta==1){ cancelAnimationFrame(timer); ca.style.opacity="0"; sta=0; }else{ timer=requestAnimationFrame(work); ca.style.opacity="1"; sta=1; } } function ShowTab(){ 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 (var i=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"; } } } function ShowPicture(){ dx=document.getElementById("main"); if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0"; } function ChangePicture(){ 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>
<div class="wrap"> <div class="box1 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(14).png"></img> </div> <div class="box2 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img> </div> <div class="box3 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(8).png"></img> </div> <div class="box4 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(6).png"></img> </div> <div class="box5 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(40).png"></img> </div> <div class="box6 box"> <img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img> </div> </div>
这里面的图片可以自己选择，但是要注意大小哦，如果做博客园博客的美化可以直接把图片放相册，如果是私人博客美化，可以选择床图。
设置侧边栏与主题的位置
（加到页面定制CSS代码）
#mainContent { min-height: 200px; padding: 0px 0px 10px 0; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; float: right; margin-left: -22em; 100%; } #sideBar { margin-top: -15px; 230px; min-height: 200px; padding: 0px 0 0px 5px; float: left; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; }
设置版权信息
加到“页首html”
<script language="javascript" type="text/javascript"> jQuery(document).on('copy', function(e) { var selected = window.getSelection(); var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：Hk_Mayfly<br> 源地址：' + document.location.href + '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！'; var copyHolder = $('<div>', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}}); $('body').append(copyHolder); selected.selectAllChildren( copyHolder[0] ); window.setTimeout(function() { copyHolder.remove(); },0); }); </script>
图片放大
添加进 页面CSS
.post img {
cursor: pointer;
transition: all 0.5s;
}
.post img:hover {
transform: scale(1.3);
}