博客美化篇
博客美化网站推荐：
推荐（下面大多是引用这三个blogs里面的东西的）三个 nice 的 博客美化blogs：
注意事项：
如果这些css代码放在你的 blog 里面没有效果，然后你发现保存设置后这些代码部分还消失了，那其实不是代码的问题
原因大概就是你还没申请支持 js 代码使用，申请成功后你的博客侧边栏公告旁边应该是这样的：
如果你的小括号里面有申请按钮的话，点进去填一下理由就好了，一般都能申请通过
公告栏里的每日一言：
<h4 class="ui top attached block header">一言（ヒトコト）</h4> <script> $.get('https://sslapi.hitokoto.cn/?c=a', function (data) { if (typeof data === 'string') data = JSON.parse(data); $('#hitokoto-loader').removeClass('active'); $('#hitokoto-content').css('display', '').text(data.hitokoto); if (data.from) { $('#hitokoto-from').css('display', '').text('——' + data.from); } }); </script> <div style="font-size: 15px; line-height: 1.5em;" id="hitokoto-content"></div> <div style="text-align: right; margin-top: 15px; font-size: 15px; color: rgb(102, 102, 102);" id="hitokoto-from"></div>
公告栏里的立方体：
1 <div id="blog-news"> 2 3 <style> 4 /*最外层容器样式*/ 5 .wrap { 6 width: 100px; 7 height: 100px; 8 margin: 150px; 9 position: relative; 10 } 11 12 /*包裹所有容器样式*/ 13 .cube { 14 width: 50px; 15 height: 50px; 16 margin: 0 auto; 17 transform-style: preserve-3d; 18 transform: rotateX(-30deg) rotateY(-80deg); 19 animation: rotate linear 20s infinite; 20 } 21 22 @-webkit-keyframes rotate { 23 from { 24 transform: rotateX(0deg) rotateY(0deg); 25 } 26 to { 27 transform: rotateX(360deg) rotateY(360deg); 28 } 29 } 30 31 .cube div { 32 position: absolute; 33 width: 200px; 34 height: 200px; 35 opacity: 0.8; 36 transition: all .4s; 37 } 38 39 /*定义所有图片样式*/ 40 .pic { 41 width: 200px; 42 height: 200px; 43 } 44 45 .cube .out_front { 46 transform: rotateY(0deg) translateZ(100px); 47 } 48 49 .cube .out_back { 50 transform: translateZ(-100px) rotateY(180deg); 51 } 52 53 .cube .out_left { 54 transform: rotateY(-90deg) translateZ(100px); 55 } 56 57 .cube .out_right { 58 transform: rotateY(90deg) translateZ(100px); 59 } 60 61 .cube .out_top { 62 transform: rotateX(90deg) translateZ(100px); 63 } 64 65 .cube .out_bottom { 66 transform: rotateX(-90deg) translateZ(100px); 67 } 68 69 /*定义小正方体样式*/ 70 .cube span { 71 display: block; 72 width: 100px; 73 height: 100px; 74 position: absolute; 75 top: 50px; 76 left: 50px; 77 } 78 79 .cube .in_pic { 80 width: 100px; 81 height: 100px; 82 } 83 84 .cube .in_front { 85 transform: rotateY(0deg) translateZ(50px); 86 } 87 88 .cube .in_back { 89 transform: translateZ(-50px) rotateY(180deg); 90 } 91 92 .cube .in_left { 93 transform: rotateY(-90deg) translateZ(50px); 94 } 95 96 .cube .in_right { 97 transform: rotateY(90deg) translateZ(50px); 98 } 99 100 .cube .in_top { 101 transform: rotateX(90deg) translateZ(50px); 102 } 103 104 .cube .in_bottom { 105 transform: rotateX(-90deg) translateZ(50px); 106 } 107 108 /*鼠标移入后样式*/ 109 .cube:hover .out_front { 110 transform: rotateY(0deg) translateZ(200px); 111 } 112 113 .cube:hover .out_back { 114 transform: translateZ(-200px) rotateY(180deg); 115 } 116 117 .cube:hover .out_left { 118 transform: rotateY(-90deg) translateZ(200px); 119 } 120 121 .cube:hover .out_right { 122 transform: rotateY(90deg) translateZ(200px); 123 } 124 125 .cube:hover .out_top { 126 transform: rotateX(90deg) translateZ(200px); 127 } 128 129 .cube:hover .out_bottom { 130 transform: rotateX(-90deg) translateZ(200px); 131 } 132 </style> 133 134 135 <!-- 外层最大容器 --> 136 <div class="wrap"> 137 <!--包裹所有元素的容器--> 138 <div class="cube"> 139 <!--前面图片 --> 140 <div class="out_front"> 141 <img src="http://你的图片.jpg" class="pic"> 142 </div> 143 <!--后面图片 --> 144 <div class="out_back"> 145 <img src="http://你的图片.jpg" class="pic"> 146 </div> 147 <!--左面图片 --> 148 <div class="out_left"> 149 <img src="https://你的图片.jpg" class="pic"> 150 </div> 151 <!--右面图片 --> 152 <div class="out_right"> 153 <img src="https://你的图片.jpg" class="pic"> 154 </div> 155 <!--上面图片 --> 156 <div class="out_top"> 157 <img src="https://你的图片.jpg" class="pic"> 158 </div> 159 <!--下面图片 --> 160 <div class="out_bottom"> 161 <img src="http://你的图片.jpg" class="pic"> 162 </div> 163 164 <!--小正方体 --> 165 <span class="in_front"> 166 <img src="https://你的图片.jpg" class="in_pic"> 167 </span> 168 <span class="in_back"> 169 <img src="https://你的图片.jpg" class="in_pic"> 170 </span> 171 <span class="in_left"> 172 <img src="https://你的图片.jpg" class="in_pic"> 173 </span> 174 <span class="in_right"> 175 <img src="http://你的图片.jpg" class="in_pic"> 176 </span> 177 <span class="in_top"> 178 <img src="http://你的图片.jpg" class="in_pic"> 179 </span> 180 <span class="in_bottom"> 181 <img src="http://你的图片.jpg" class="in_pic"> 182 </span> 183 </div> 184 185 </div>
公告栏里的时钟：
<embed src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" width="230" height="100"></embed>
公告栏里的地球：
<embed src="//rf.revolvermaps.com/f/g.swf" width="230" height="230"></embed>
页首（脚）Html里的点击效果：
<!DOCTYPE html> <html> <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤请❤","❤开始❤","❤你的❤","❤表演❤","★%%%♚bztdalao♚★"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> <body> /* 这里是其他的设置 */ </body> </html>
至于动态背景和背景变换之类的...算了吧 _(:з」∠)_
页首（脚）Html里的看板娘：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Judge/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" right="0" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/judge/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/Judge/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html> 看板娘
但是看板娘不大想用...（风格问题emmmm）
页首（脚）Html里的回到顶部：
1 <style> 2 #back-top { 3 position: fixed; 4 bottom: 0px; 5 right: 10px; 6 z-index: 99; 7 } 8 #back-top span { 9 width: 150px; 10 height: 200px; 11 display: block; 12 background:url(你的图片.jpg)no-repeat center center; 13 } 14 #back-top a{outline:none} 15 </style> 16 17 <script type="text/javascript"> 18 $(function() { 19 // hide #back-top first 20 $("#back-top").hide(); 21 // fade in #back-top 22 $(window).scroll(function() { 23 if ($(this).scrollTop() > 500) { 24 $('#back-top').fadeIn(); 25 } else { 26 $('#back-top').fadeOut(); 27 } 28 }); 29 // scroll body to 0px on click 30 $('#back-top a').click(function() { 31 $('body,html').animate({ 32 scrollTop: 0 33 }, 800); 34 return false; 35 }); 36 }); 37 </script> 38 39 <p id="back-top" style=""><a href="#top"><span></span></a></p>
这里的图片...emmmm
其实还有另一个蛮不错的回到顶部（剽来的）：
1 <div class="back-to-top back-to-top-on"> 2 <i class="fa fa-arrow-up"></i> 3 4 <span id="scrollpercent"><span>9</span>%</span> 5 6 </div>
页首（脚）Html里的目录索引列表：
1 //生成目录索引列表 2 function GenerateContentList() 3 { 4 var jquery_h1_list = $('#cnblogs_post_body h1'); 5 if (jquery_h1_list.length == 0) { return; } 6 if ($('#cnblogs_post_body').length == 0) { return; } 7 8 var content = '<a name="_labelTop"></a>'; 9 content += '<div id="navCategory">'; 10 content += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>'; 11 // 一级目录 start 12 content += '<ul class="first_class_ul">'; 13 14 for (var i = 0; i < jquery_h1_list.length; i++) 15 { 16 17 // 一级目录的一条 18 var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>'; 19 20 var nextH1Index = i + 1; 21 if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; } 22 var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2"); 23 // 二级目录 start 24 if (jquery_h2_list.length > 0) 25 { 26 //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">'; 27 li_content += '<ul class="second_class_ul">'; 28 } 29 for (var j = 0; j < jquery_h2_list.length; j++) 30 { 31 var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>'; 32 $(jquery_h2_list[j]).before(go_to_top2); 33 // 二级目录的一条 34 li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>'; 35 36 var nextH2Index = j + 1; 37 var next; 38 if (nextH2Index == jquery_h2_list.length) 39 { 40 if (i + 1 == jquery_h1_list.length) 41 { 42 next = jquery_h1_list[0]; 43 } 44 else 45 { 46 next = jquery_h1_list[i + 1]; 47 } 48 } 49 else 50 { 51 next = jquery_h2_list[nextH2Index]; 52 } 53 var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3"); 54 // 三级目录 start 55 if (jquery_h3_list.length > 0) 56 { 57 li_content += '<ul class="third_class_ul">'; 58 } 59 60 for (var k = 0; k < jquery_h3_list.length; k++) 61 { 62 var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; 63 $(jquery_h3_list[k]).before(go_to_third_Content); 64 // 三级目录的一条 65 li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>'; 66 } 67 68 if (jquery_h3_list.length > 0) 69 { 70 li_content += '</ul>'; 71 } 72 li_content += '</li>'; 73 // 三级目录 end 74 } 75 if (jquery_h2_list.length > 0) 76 { 77 li_content +='</ul>'; 78 } 79 li_content +='</li>'; 80 // 二级目录 end 81 82 content += li_content; 83 } 84 // 一级目录 end 85 content += '</ul>'; 86 content += '</div>'; 87 88 $($('#cnblogs_post_body')[0]).prepend(content); 89 } 90 91 GenerateContentList(); 92 </script>
页首（脚）Html里的黑点跟随系统：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>follow mouse</title> 5 <meta name="Author" content="hongru.chen" /> 6 <style type="text/css"> 7 html { 8 overflow: hidden; 9 } 10 body { 11 position: absolute; 12 height: 100%; 13 width: 100%; 14 margin:0; 15 padding:0; 16 } 17 #screen { 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 } 22 #screen span { 23 background: #000; 24 font-size: 0; 25 overflow: hidden; 26 width: 2px; 27 height: 2px; 28 } 29 </style> 30 <script type="text/javascript"> 31 var Follow = function () { 32 var $ = function (i) {return document.getElementById(i)}, 33 addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})}, 34 OBJ = [], sp, rs, N = 0, m; 35 var init = function (id, config) { 36 this.config = config || {}; 37 this.obj = $(id); 38 sp = this.config.speed || 4; 39 rs = this.config.animR || 1; 40 m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5}; 41 this.setXY(); 42 this.start(); 43 } 44 init.prototype = { 45 setXY : function () { 46 var _this = this; 47 addEvent(this.obj, 'mousemove', function (e) { 48 e = e || window.event; 49 m.x = e.clientX; 50 m.y = e.clientY; 51 }) 52 }, 53 start : function () { 54 var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn; 55 OBJ[N++] = OO = new CObj(null, 0, 0); 56 for(var i=0;i<360;i+=20){ 57 var O = OO; 58 for(var j=10; j<35; j+=1){ 59 var x = fn(i, j).x, 60 y = fn(i, j).y; 61 OBJ[N++] = o = new CObj(O , x, y); 62 O = o; 63 } 64 } 65 setInterval(function() { 66 for (var i = 0; i < N; i++) OBJ[i].run(); 67 }, 16); 68 } 69 } 70 var CObj = function (p, cx, cy) { 71 var obj = document.createElement("span"); 72 this.css = obj.style; 73 this.css.position = "absolute"; 74 this.css.left = "-1000px"; 75 this.css.zIndex = 1000 - N; 76 document.getElementById("screen").appendChild(obj); 77 this.ddx = 0; 78 this.ddy = 0; 79 this.PX = 0; 80 this.PY = 0; 81 this.x = 0; 82 this.y = 0; 83 this.x0 = 0; 84 this.y0 = 0; 85 this.cx = cx; 86 this.cy = cy; 87 this.parent = p; 88 } 89 CObj.prototype.run = function () { 90 if (!this.parent) { 91 this.x0 = m.x; 92 this.y0 = m.y; 93 } else { 94 this.x0 = this.parent.x; 95 this.y0 = this.parent.y; 96 } 97 this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp; 98 this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp; 99 this.css.left = Math.round(this.x) + 'px'; 100 this.css.top = Math.round(this.y) + 'px'; 101 } 102 return init; 103 }(); 104 </script></head> 105 <body> 106 <div id="screen"></div> 107 <script type="text/javascript"> 108 new Follow('screen', {speed: 4, 109 animR : 2, 110 fn : function (i, j) { 111 return { 112 x : j/4*Math.cos(i), 113 y : j/4*Math.sin(i) 114 } 115 }}) 116 </script></body> 117 </html>
页首（脚）Html里的自动目录栏 ：
1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 2 <link href="https://blog-static.cnblogs.com/files/marvin/Wiz_marvin.nav.css" rel="stylesheet"> 3 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/marvin/Wiz_marvin.nav.js"></script>
页首（脚）Html标题切换：
1 <script type="text/javascript"> 2 var OriginTitile = document.title; // 保存之前页面标题 3 var titleTime; 4 document.addEventListener('visibilitychange', function(){ 5 if (document.hidden){ 6 document.title ='click here'; 7 clearTimeout(titleTime); 8 }else{ 9 document.title = '你回来了QvQ'; 10 titleTime = setTimeout(function() { 11 document.title = OriginTitile; 12 }, 1000); 13 } 14 }); 15 </script>
页面定制里的鼠标图案变换：
body {
cursor: url(你的ico图片.ico 或者是 你的cur文件.cur ),auto;
}
