博客美化篇

博客美化网站推荐：

推荐（下面大多是引用这三个blogs里面的东西的）三个 nice 的博客美化blogs：

全网最全的博客美化系列教程（疑似太监QAQ）

自定义页面风格设计上篇

自定义页面风格设计下篇

注意事项：

如果这些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              100px;
  7             height: 100px;
  8             margin: 150px;
  9             position: relative;
 10         }
 11  
 12         /*包裹所有容器样式*/
 13         .cube {
 14              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              200px;
 34             height: 200px;
 35             opacity: 0.8;
 36             transition: all .4s;
 37         }
 38  
 39         /*定义所有图片样式*/
 40         .pic {
 41              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              100px;
 73             height: 100px;
 74             position: absolute;
 75             top: 50px;
 76             left: 50px;
 77         }
 78  
 79         .cube .in_pic {
 80              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>

emmmm

公告栏里的时钟：

<embed src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"
width="230" height="100"></embed>

clock

公告栏里的地球：

<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       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>

回到顶部2

页首（脚）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  100%;
 14 margin:0;
 15 padding:0;
 16 }
 17 #screen {
 18 position: absolute;
 19  100%;
 20 height: 100%;
 21 }
 22 #screen span {
 23 background: #000;
 24 font-size: 0;
 25 overflow: hidden;
 26  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>

View Code

页面定制里的鼠标图案变换：

body {
    cursor: url(你的ico图片.ico 或者是 你的cur文件.cur ),auto;
}

鼠标图案