博客园自定义

时间:2024-04-17 10:11:08

博客园自定义

参考:https://www.cnblogs.com/cainiao-chuanqi/p/11388719.html

这里是我的博客自定义样式,留作以后参考。。。

虽然说博客园这么多年一直存在,但是,这么多年也一直没有变过。给我们留下的还是原来的回忆。

博客园带给我们的是长久的回忆。虽然没有变化,但是它留给我们了一笔宝贵的功能,那就是自定义博客园。这里有各式各样的改变方式,只要你脑洞够大,想法够多,都能整出一个属于自己的博客园。这里是*者的天堂,没有那么多的边边框框,只有一群热爱*、热爱分享的伙伴们。。。

我进入博客园都有一年多了,这里给了当初的小白一笔宝贵的财富。每当闲暇之余,我都会在这里汲取知识。充实自己,这里不需要有太多人知道,这里只要有一群技术人就足够了。分享着自己的总结经验,只为了有懂的人来认可。。。

博客园在这个纷繁的网络中就像一样,舒适熟悉有安全感。让人乐此不疲的去分享,去结交新的知识,有趣的灵魂。。。

这里是我的博客园自定义样式,它就像家具一样,插入每一段,都会使自己的家焕然一新。下面是我从各个大佬手里借鉴过来的,也加入了我的一些更改和调式,让其更加贴切自己的想法。大家可以自己对比更改,让自己写博客更加的有趣。。。

附上博客园的div盒子模型,让大家能有个大体的概念。。。

页面制定css代码

下面是根据SimpleMemory模板调试的。。。

其他的模板也可以适用,就是一些小细节,大家需要自己调试。我把每个标签都做了注释。大家可以根据自己的喜好来改变自己的风格。。。

/*好看的滚动条*/

其实滚动条还可以改变颜色的,感觉灰色已经很好了 低调奢华有内涵。比之前的方块好看无数倍。。。

 1 /*好看的滚动条*/
 2 ::-webkit-scrollbar{
 3     width:10px!important;
 4     height:10px!important;
 5     -webkit-appearance:none;
 6 }
 7 ::-webkit-scrollbar-thumb{
 8     height:5px;border:1px solid transparent;
 9     border-top:none;border-bottom:none;
10     -webkit-border-radius:6px;
11     background-color:rgba(0,0,0,.3);
12     background-clip:padding-box;
13 }
 

/*博客导航栏 */

改变的之前字体的大小,后期考虑把自己的QQ和GitHub等联系的连接放上去,让导航栏更加的充实。。。

 1 /*博客导航栏 */
 2 #navList {
 3     float:right;
 4 }
 5 #navList li {
 6     border: none;
 7     font-size: 16px;
 8 }
 9 .blogStats {
10     display: none;
11 }
 

/*文章中 a 标签的触发效果*/

这是比较炫的一个小特效了。大家可以试着改变它的颜色和字体倾斜角度。

1 /*文字触发效果*/
2 a:hover {
3 /*border-bottom: 1px solid;*/
4  color: #fff;
5 text-shadow: -1px 0 0 #FFD700, 0 1px 0 #FFD700, 1px 0 0 #FFD700, 0 -1px 0 #FFD700;
6 -webkit-transition: 0.3s;
7 }

 /* 文章title自定义带动画样式 */

点击触发,让标题动起来。

 1 /* 文章title自定义带动画样式 */
 2 .postTitle {
 3   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
 4   clear: both;
 5   background-color: #FBF9F9;
 6   margin-bottom: 8px;
 7   padding-top: 5px;
 8   padding-bottom: 5px;
 9   margin-top: 17px;
10   border-left: 3px solid #21759b;
11   padding-left: 17px;
12   font-size: 17px;
13   border-radius:0px;
14 }
15 .postTitle a:hover {
16   text-decoration: none;
17   margin-left: 17px;
18   color: #E00000;
19 }
20 .postTitle a:link,
21 .postTitle a:visited,
22 .postTitle a:active {
23   transition: all 0.4s linear 0s;
24 }

/*侧边栏的展开与收回*/

侧边栏的展开与收回,可以让阅读体验更好...其中的扩展有一点bug,就是在小屏的时候回超出一部分,是因为我没有把宽度调成100%,大家根据自己的样式调节...下面的首页部分是动态效果,大家请往下翻阅...

 1 /*侧边栏的展开与收回*/
 2 #fry_append {
 3     right: 9.3%;
 4     width: 46px;
 5     top: 6%;
 6     opacity: 0.3377; 
 7     position: fixed;
 8     z-index: 98;
 9     background-color:#F5F5F5;
10     font-size: 12px;
11     margin: 10px 0 0;
12     padding: 5px;
13     border: 1px solid  #F0FFF0;
14     border-radius: 5px;
15     float: right;
16  /*  box-shadow: 0px 0px 15px 5px #FF3300 inset;
17    background: url(https://www.cnblogs.com/images/cnblogs_com/cainiao-chuanqi/1532380/t_%e5%9b%bd%e6%97%97.jpg) no-repeat; 
18 */
19 }
20 #fry_append div:first-of-type {
21     margin-top: 5px;
22 }
23 
24 #fry_append div {
25     text-align: center;
26     cursor: pointer;
27     margin-top: 10px;
28     color:#000;
29 
30 }

/*标签云--标签部分*/

让标签飘起来,瞬间让一成不变的博客有了生机......我们还可以让自己的随笔分类飘起来,只要你想到的,他都能飘...只要更改#后面的部分就能实现自己想要的效果.后面还有一个HTMl的样式,请往下翻...

 1 /*标签云--标签部分*/
 2 #sidebar_toptags > div > ul > li > a {
 3     font-size: 12px;
 4     line-height: 11px;
 5     color: #fff;
 6 }
 7 
 8 #sidebar_toptags > div > ul > li {
 9     position: absolute;
10     padding: 0 10px;
11     border-radius: 10%;
12     background: red;
13     color: #fff;
14     font-size: 14px;
15     line-height: 30px;
16     transition: all .7s;
17     font-size: 9px;
18     color: #fff;
19 }
20 
21 
22 #sidebar_toptags > div > ul {
23     position: relative !important;
24     clear: both;
25     display: block;
26     padding: 10px;
27     padding-left: 0px;
28     width: 270px;
29     height: 230px;
30     /* background: #ffffee; */
31 }

/* 个性签名 */

看完文章之后,给自己一些激励,也让大家认识一下自己,何乐而不为呢。。。

更改签名在这儿

 1 /* 个性签名 */
 2 #MySignature {
 3     box-shadow: 8px 1px 10px #989898;
 4     padding: 10px;
 5     text-shadow: 1px 1px 1px #FFF;
 6     font-size: 15px;
 7     border-left: solid 5px #55895B;
 8     background: #FBF9F9;
 9     border-radius: 10px 10px 37% 10px;
10     line-height: 2.4;
11     margin: 37px 0;
12 }
13 
14 #MySignature a {
15     text-decoration: none;
16     color: #4183c4;
17     font-weight: bold;
18 }
19 
20 #MySignature a:hover {
21     text-decoration: underline;
22     color: #f60;
23 }
24 
25 #MySignature span {
26     color: #f60;
27 }
 

 /*背景*/

摆脱了之前干巴巴的灰色或白色的背景。让阅读变得更加的有趣,但是也不能加一个太花哨的背景,那样也影响阅读。博客最主要的是保持它的可读性,让大家更关注于文章本身。

 1 /*背景*/
 2 body {
 3     color: #000;
 4     background: url(https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/o_二次元1.12.jpg) fixed;
 5     background-size:cover;
 6     background-repeat: no-repeat;
 7     font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 8     font-size: 12px;
 9     min-height: 101%;
10     margin: 0; 
11     padding: 0; 
12     height:100%;
13 }
14 
15 #home {
16     opacity: 0.97; 
17     margin: 0px auto;
18     width: 73%;
19    min-width: 950px;
20     background-color: #fff;
21     padding: 30px;
22     margin-top: 50px;
23     margin-bottom: 50px;
24     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
25 }
 

/*背景星光动态图*/

 1 /*星光动态图*/
 2 .wall{
 3     position: fixed;
 4     top: 0;
 5     left: 0;
 6     bottom: 0;
 7     right: 0;
 8 }
 9 div#midground{
10     background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115313midground.png");
11     z-index: -1;
12     -webkit-animation: cc 230s linear infinite;/*控制星光飘落速度*/
13     -moz-animation: cc 230s linear infinite;
14     -o-animation: cc 230s linear infinite;
15     animation: cc 230s linear infinite;
16 }
17 /*div#foreground{
18     background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png");
19     z-index: -2;
20     -webkit-animation: cc 253s linear infinite;
21     -o-animation: cc 253s linear infinite;
22     -moz-animation: cc 253s linear infinite;
23     animation: cc 253s linear infinite;
24 }*/
25 div#top{
26     background: url("https://images.cnblogs.com/cnblogs_com/cainiao-chuanqi/1538321/t_191109115413foreground.png");
27     z-index: -4;
28     -webkit-animation: da 200s linear infinite;
29     -o-animation: da 200s linear infinite;
30     animation: da 200s linear infinite;
31 }
32 @-webkit-keyframes cc {
33     from{
34         background-position: 0 0;
35         transform: translateY(10px);
36     }
37     to{
38         background-position: 0 600%;
39     }
40 }
41 @-o-keyframes cc {
42     from{
43         background-position: 0 0;
44         transform: translateY(10px);
45     }
46     to{
47         background-position: 0 600%;
48     }
49 }
50 @-moz-keyframes cc {
51     from{
52         background-position: 0 0;
53         transform: translateY(10px);
54     }
55     to{
56         background-position: 0 600%;
57     }
58 }
59 @keyframes cc {
60     0%{
61         background-position: 0 0;
62     }
63     100%{
64         background-position: 0 600%;
65     }
66 }
67 
68 @keyframes da {
69     0%{
70         background-position: 0 0;
71     }
72     100%{
73         background-position: 0 600%;
74     }
75 }
76 @-webkit-keyframes da {
77     0%{
78         background-position: 0 0;
79     }
80     100%{
81         background-position: 0 600%;
82     }
83 }
84 @-moz-keyframes da {
85     0%{
86         background-position: 0 0;
87     }
88     100%{
89         background-position: 0 600%;
90     }
91 }
92 @-ms-keyframes da {
93     0%{
94         background-position: 0 0;
95     }
96     100%{
97         background-position: 0 600%;
98     }
99 }
 

/*星光控制(ps:首页处)*/

1 <!--  页首代码 星光-->
2 
3 <div id="midground" class="wall"></div>
4 <div id="foreground" class="wall"></div>
5 <div id="top" class="wall"></div>

/*目录样式*/

就是傍边的目录导航栏了。。。

我的这个样式分三块,这里的CSS样式,还有下面两个JS样式。。。

 
 1 /*目录样式*/
 2 #sideCatalog a{
 3   font-size:12px;
 4   font-weight:normal !important;
 5 }
 6 
 7 #sideCatalog li {
 8   background-color: #F0FFF0;
 9 }
10 
11 #sideCatalog {
12   opacity:0.73;
13 }
14 
15 #sideCatalog a:hover{
16   color:#8B0000;
17 }

 /*h2和h3的自定义样式*/

主次分明。阅读要有节奏感。。。

 1 /*标题h2的自定义格式*/
 2 #cnblogs_post_body h2  {
 3     border: 1px solid #55895B;
 4     border-left-width: 5px;
 5     border-radius: 10px;
 6     border-right-width: 5px;
 7     background-color: #FBF9F9;
 8     background-position: left center;
 9     padding: 3px 5px;
10     width: 100%;
11     display: inline-block;
12     box-sizing: border-box;
13 }
14 
15 /*标题h3的自定义格式*/
16 #cnblogs_post_body h3  {
17     border: 1px solid #696969;
18     border-left-width: 3px;
19     border-radius: 7px;
20     border-right-width: 5px;
21     background-color: #F5F5F5;
22     background-position: left center;
23     padding: 2px 3px;
24     width: 37%;
25     display: inline-block;
26     box-sizing: border-box;
27 }

 /*侧边栏公告*/

加一个自我画像,让大家认识你。。。

 1 /*侧边栏公告*/
 2 /*新加  头像 img 侧边圆圈*/
 3 #newsSideBar .headImage {
 4     padding: auto;
 5 }
 6 #newsSideBar .headImage img {
 7     border: 3px solid #C0C0C0;
 8     border-radius: 50%;
 9     width: 150px;
10     margin: auto;
11     display: block;
12 }
13 
14 /*头像*/
15 #blog-news > img {
16     display: block;
17     margin: auto;
18     border-radius: 50%;
19 }
20 #profile_block {
21     font-size: 15px;
22     padding: 20px;
23     line-height: 1.8;
24 }
25 #profile_block > a:link {
26     color: #F60;
27 }
28 
29 /*博客侧边标题样式*/
30 .catListTitle {
31 margin-top: 21px;
32 margin-bottom: 10.5px;
33 text-align: left;
34 border-left: 3px solid rgba(82, 168, 236, 0.8);
35 padding: 10px 0 7px 10px;
36 background-color: #f5f5f5;
37 }
38 /*公告结束*/
 

 /*最底部收藏样式*/

点赞按钮,这个比较中规中矩,emmm就是把反对键取消了,对   ,就是不接收批评。。。

然后原来的下一篇,字体太小了,可以 把他调大一点。大家如果想把那个地方改变成自己喜欢的样式,可以点击那个地方,右键,检查。就可以看到这个标签是什么,并且自己也可以在css样式中改变自己想要的属性。来消除自己的强迫症。。。

补充:之前的关注收藏几个按钮,不用比较,太难看了。。。

 1 /* 关注收藏等几个按钮 */
 2 #green_channel {
 3     padding: 5px 0 15px 0;
 4     margin-bottom: 10px;
 5     margin-top: 10px;
 6     border: 0;
 7     border-top: #eee 1px dashed;
 8     border-bottom: #eee 1px dashed;
 9     border-bottom-width: 1px;
10     border-bottom-style: dashed;
11     border-bottom-color: rgb(238, 238, 238);
12     font-size: 12px;
13     width: 100%!important;
14     text-align: center;
15     display: inline-block;
16     vertical-align: middle;
17 }
18 
19 a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
20     text-decoration: none;
21     color: #fff;
22     margin: auto;
23     width: 80px;
24     display: inline-block;
25     line-height: 30px;
26     font-size: 15px;
27     font-weight: 500;
28     letter-spacing: 2px;
29     border-radius: 3px;
30     text-transform: uppercase;
31     transition: all .4s;
32     -webkit-transition: all .4s;
33     -moz-transition: all .4s;
34     -ms-transition: all .4s;
35     -o-transition: all .4s;
36     position: relative;
37     margin-left: 10px;
38     background-image: none;
39     margin-top: 10px;
40 }
41 a#green_channel_digg {
42     background-color: #2daebf;
43     box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
44 }
45 
46 a#green_channel_favorite {
47     background-color: #ffb515;
48     box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
49     margin-left: 10px;
50 }
51 a#green_channel_follow {
52     background-color: #e33100!important;
53     box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
54     margin-left: 10px;
55 }
56 
57 a#green_channel_wechat {
58     padding: 3px 8px!important;
59     background-color: #3cb034!important;
60     box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
61     margin-left: 10px;
62     width: 35px;
63 }
64 
65 a#green_channel_weibo {
66     padding: 3px 8px!important;
67     background-color: #ff464b!important;
68     box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
69     margin-left: 10px;
70     width: 35px;
71 }
72 
73 /*下面的头像边框*/
74 #author_profile_info img.author_avatar {
75     border-radius: 100%;
76     box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
77     border: 3px solid #f7f7f7;
78     padding: 0;
79     margin-left: 3px;
80     margin-right: 7px;
81 }
82 
83 /* 禁用下划线 */
84 .postBody a:link, .postBody a:visited, .postBody a:active {
85     text-decoration: none;
86 }
87 
88 /* 上一篇下一篇 */
89 #post_next_prev {
90     font-size: 14px;
91     color: #535353;
92 }
26 /*顶一下*/
27 .diggnum {
28     font-size:28px;
29     color:#6DA47D;
30     font-family:\'Microsoft Yahei\';
31 }
32 #div_digg .diggnum {
33     line-height:37px;
34 }
35 .diggit {
36     float:left;
37     width:73px;
38     height:73px;
39     background:url(\'http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_dig.gif\') no-repeat;
40     background-position:0 0;
41     text-align:center;
42     cursor:pointer;
43 }
44 .diggit:hover {
45     background-position:-73px 0;
46 }
47 
48 /* 删除反对按钮,有点邪恶了 */
49 .buryit{
50   display: none;
51 }
52 /*屏蔽广告 adblock */
53 #ad_t2 {
54     display: none;
55 }
56 .c_ad_block {
57     display: none;
58 }
 

/*编辑 收藏字体突出*/

让文章下面不再光秃秃的,编辑这个按钮还是比较长用到的,有的时候找半天找不到,还不如把他放大一点,做一点修饰,让自己在该文章的时候心情更加的舒畅。。。

 1 /*编辑 收藏*/
 2 #topics .postDesc a {
 3     background-color: #51C332;
 4     border-radius: 3px;
 5     text-align: center;
 6     color: white;
 7     text-shadow: 1px 1px 2px #8B0000;
 8     padding: 3.7px 13px;
 9     font-size: 14px;
10     font-weight: bold;
11     line-height: 1.5;
12     margin: 10px 3px;
13     box-shadow: black 0px 2px 8px;
14 }
 

/*防止图片溢出*/

 
 1 /* 防止图片溢出 */
 2 #cnblogs_post_body img {
 3   max-width: 100%;
 4 }
 5 
 6 //如果没有bug可以忽略这一条
 7 /*溢出隐藏设置*/
 8 #topics, #mainContent {
 9     overflow: visible;
10 }
11 #postDesc {
12     float: none;
13 }
 

/*评论区*/

之前的评论区 ,实在是不忍直视,我猜博客园评论这么少的原有,一定是它太丑了。。。

下面是我把别人的模板样式给截取下来的,有几处是冗余的,大家可以根据自己的喜好增加删除。。。

  1 /*评论*/
  2 /*评论列表*/
  3 /*侧边栏和评论区更改*/
  5 .syntaxhighlighter a, 
  6 .syntaxhighlighter div,
  7  .syntaxhighlighter code,
  8  .syntaxhighlighter table, 
  9  .syntaxhighlighter table td,
 10  .syntaxhighlighter table tr,
 11  .syntaxhighlighter table tbody,
 12  .syntaxhighlighter table thead,
 13  .syntaxhighlighter table caption, 
 14  
 15  .syntaxhighlighter textarea {
 16 font-size: 14px!important;
 17 }
 18 /*评论区*/
 19 /*评论框*/
 20 div.commentform p{
 21 margin-bottom:10px;
 22 }
 23 /*评论按钮*/
 24 .comment_btn {
 25 padding: 5px 10px;
 26 height: 35px;
 27 width: 90px;
 28 border: 0 none;
 29 border-radius: 5px;
 30 background: #ddd;
 31 color: #999;
 32 cursor:pointer;
 33 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
 34 text-shadow: 0 0 1px #fff;
 35 display: inline !important;
 36 }
 37 .comment_btn:hover{
 38 padding: 5px 10px;
 39 height: 35px;
 40 width: 90px;
 41 border: 0 none;
 42 border-radius: 5px;
 43 background: #258fb8;
 44 color: white;
 45 cursor:pointer;
 46 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
 47 text-shadow: 0 0 1px #fff;
 48 display: inline !important;
 49 }
 50 #commentform_title {
 51 background-image:none;
 52 background-repeat:no-repeat;
 53 margin-bottom:10px;
 54 padding:0;
 55 font-size:24px;
 56 }
 57 #commentbox_opt,#commentbox_opt + p {
 58 text-align:center;
 59 }
 60 .commentbox_title {
 61 width: 100%;
 62 }
 63 /*评论输入域*/
 64 #tbCommentBody {
 65 font-family:\'Microsoft Yahei\', Microsoft Yahei, 宋体, sans-serif;
 66 margin-top:10px;
 67 max-width:100%;
 68 min-width:100%;
 69 background:white;
 70 color:#333;
 71 border:2px solid #fff;
 72 box-shadow:inset 0 0 8px #aaa;
 73 // padding:10px;
 74 height:250px;
 75 font-size:14px;
 76 min-height:120px;
 77 }
 78 /*评论条目*/
 79 .feedbackItem {
 80 font-size:14px;
 81 line-height:24px;
 82 margin:10px 0;
 83 padding:20px;
 84 background:#F2F2F2;
 85 box-shadow:0 0 5px #aaa;
 86 }
 87 .feedbackListSubtitle {
 88 font-weight:normal;
 89 }
 90 
 91 #blog-comments-placeholder, #comment_form {
 92 padding: 20px;
 93 background: #fff;
 94 -webkit-box-shadow: 1px 2px 3px #ddd;
 95 box-shadow: 1px 2px 3px #ddd;
 96 margin-bottom: 50px;
 97 }
 98 /*评论标题*/
 99 .feedback_area_title {
100 margin-bottom: 15px;
101 font-size: 1.8em;
102 }
103 .feedbackItem {
104 border-bottom: 1px solid #CCC;
105 margin-bottom: 10px;
106 padding: 5px;
107 background: rgb(248, 248, 248);
108 }
109 .color_shine {background: rgb(226, 242, 255);}
110 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
111 
112 #comment_form .title {
113 font-weight: normal;
114 margin-bottom: 15px;
115 }
 
页面定制CSS代码全部备份

博客侧边栏公告(支持HTML代码)(支持JS代码)

/*这里是插入头像图片的地址*/

1 <div id="newsSideBar">
2     <div class="headImage">
3     /*这里是插入头像图片的地址*/
4         <img src="https://pic.cnblogs.com/avatar/1444343/20190803112901.png" alt="头像">
5     </div>
6 </div>

/*标签云的动态效果*/

 
  1 <script type="text/javascript">
  2 /*标签云的动态效果*/
  3 function gotoTop(){
  4             setTimeout(function(){
  5                     
  6                     document.documentElement.scrollTop = (document.documentElement.scrollTop*0.1);
  7                     document.body.scrollTop = (document.body.scrollTop - document.body.scrollTop*0.1);
  8                     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  9 
 10                 if(scrollTop > 0){
 11                     gotoTop();
 12                 }
 13             },10);
 14         }
 15 
 16 
 17 
 18 var Ftimer = setInterval (Ftoggle,1000),
 19       contral = [false,false];
 20 
 21 function Ftoggle(){
 22     var tagObjbox = document.getElementsByClassName(\'catListTag\')[0],
 23               tagObj = tagObjbox.getElementsByTagName(\'li\'),
 24               navList = document.getElementById(\'navList\');
 25 
 26     if(tagObjbox && tagObj){
 27        contral[1]=true;
 28         SlideTag(tagObj);
 29     }
 30     if(navList){
 31        contral[2]=true;
 32        AddLi(navList);
 33     }
 34 
 35     if(contral[1] & contral[2]){
 36        clearInterval(Ftimer);
 37     }
 38 }
 39 
 40 function AddLi(e){
 41     var li = document.createElement(\'li\'),
 42         a = document.createElement(\'a\');
 43  
 44     a.innerHTML = \'⚪\';
 45     a.className = \'menu\';
 46     a.href = \'https://home.cnblogs.com/u/cainiao-chuanqi/\';
 47     li.appendChild(a);
 48     e.appendChild(li);
 49 
 50 
 51 }
 52 
 53 function SlideTag(tagObj){
 54 
 55             offset = true;
 56 
 57         PreSeting(); 
 58     
 59     for(var i=0;i<tagObj.length;i++){
 60         (function(i){
 61             tagObj[i].onmouseover = function(){
 62             offset = false;
 63             index = parseInt(this.style.zIndex);
 64             this.style.zIndex = 9999;
 65             }
 66             tagObj[i].onmouseout = function(){
 67             offset = true;
 68             this.style.zIndex = index;
 69             }
 70         })(i);
 71     }
 72         
 73     setInterval(PreSeting,5000)
 74 
 75     function F_getSJS(x,y,z){       
 76         
 77         var int = null;
 78 
 79         if(!z) { z = 6}
 80 
 81         while(int >= x || int <= y || int === null){
 82             int = Math.random();
 83             int = (int.toFixed(z) * x).toFixed(0);
 84         }
 85         return int;            
 86     }
 87 
 88     function PreSeting(){
 89              if(offset){
 90         for(var i=0;i<tagObj.length;i++){
 91             tagObj[i].style.left = F_getSJS(100,30,10)  + \'px\';
 92             tagObj[i].style.top = F_getSJS(200,30,10) + \'px\';
 93             tagObj[i].style.backgroundColor = \'rgb(\' + F_getSJS(256,-1,5) + \',\' + F_getSJS(256,-1,10) + \',\' + F_getSJS(256,-1,15) + \')\';
 94             tagObj[i].style.zIndex = F_getSJS(200,0,16);
 95         }
 96 }
 97 
 98     }
 99 
100 
101 }
102 
103 onload = function(){
104 
105 if(location.href == \'https://www.cnblogs.com/cainiao-chuanqi/\' || location.href == \'https://www.cnblogs.com/cainiao-chuanqi/\'){setTimeout(goto,3000);}
106 
107 function goto(){
108          document.getElementById(\'headbox\').style.display = \'block\';    
109          document.documentElement.scrollTop = document.documentElement.scrollTop + 200;
110          document.body.scrollTop = document.body.scrollTop + 200;
111 }
112 }
113 
114 </script>
 

/*设置目录*/

 
  1 <script type="text/javascript">
  2 
  3 /*设置目录(侧边HTML代码)*/
  4       //以下是锚点JS
  5       var a = $(document);
  6       a.ready(function() {
  7         var b = $(\'body\'),
  8           d = \'sideToolbar\',
  9           e = \'sideCatalog\',
 10           f = \'sideCatalog-catalog\',
 11           g = \'sideCatalogBtn\',
 12           h = \'sideToolbar-up\',
 13           i = \'<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>\',
 14           j = \'\',
 15           k = 200,
 16           l = 0,
 17           m = 0,
 18           n = 0,
 19           //限制存在个数,如数量过多,则只显示h2,不显示h3
 20           //o, p = 13,
 21           o, p = 100,
 22           q = true,
 23           r = true,
 24           s = b;
 25         if(s.length === 0) {
 26           return
 27         };
 28         b.append(i);
 29         //指定获取目录的范围-------------这一点非常重要,因为每个人指定的范围都不一样,所以这是要修改的地方
 30         //o = s.find(\':header\');
 31         o = $(\'#cnblogs_post_body\').find(\':header\')
 32         if(o.length > p) {
 33           r = false;
 34           var t = s.find(\'h2\');
 35           var u = s.find(\'h3\');
 36           if(t.length + u.length > p) {
 37             q = false
 38           }
 39         };
 40         o.each(function(t) {
 41           var u = $(this),
 42             v = u[0];
 43 
 44           var title = u.text();
 45           var text = u.text();
 46 
 47           u.attr(\'id\', \'autoid-\' + l + \'-\' + m + \'-\' + n)
 48           //if (!u.attr(\'id\')) {
 49           //    u.attr(\'id\', \'autoid-\' + l + \'-\' + m + \'-\' + n)
 50           //};
 51           if(v.localName === \'h2\') {
 52             l++;
 53             m = 0;
 54             if(text.length > 14) text = text.substr(0, 20) + "...";
 55             j += \'<li><span>\' + l + \'&nbsp&nbsp</span><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + text + \'</a><span class="sideCatalog-dot"></span></li>\';
 56           } else if(v.localName === \'h3\') {
 57             m++;
 58             n = 0;
 59             if(q) {
 60               if(text.length > 12) text = text.substr(0, 16) + "...";
 61               j += \'<li class="h2Offset"><span>\' + l + \'.\' + m + \'&nbsp&nbsp</span><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + text + \'</a></li>\';
 62             }
 63           } else if(v.localName === \'h4\') {
 64             n++;
 65             if(r) {
 66               j += \'<li class="h3Offset"><span>\' + l + \'.\' + m + \'.\' + n + \'&nbsp&nbsp</span><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + u.text() + \'</a></li>\';
 67             }
 68           }
 69         });
 70         $(\'#\' + f + \'>ul\').html(j);
 71         b.data(\'spy\', \'scroll\');
 72         b.data(\'target\', \'.sideCatalogBg\');
 73         $(\'body\').scrollspy({
 74           target: \'.sideCatalogBg\'
 75         });
 76         $sideCatelog = $(\'#\' + e);
 77         $(\'#\' + g).on(\'click\', function() {
 78           if($(this).hasClass(\'sideCatalogBtnDisable\')) {
 79             $sideCatelog.css(\'visibility\', \'hidden\')
 80           } else {
 81             $sideCatelog.css(\'visibility\', \'visible\')
 82           };
 83           $(this).toggleClass(\'sideCatalogBtnDisable\')
 84         });
 85         $(\'#\' + h).on(\'click\', function() {
 86           $("html,body").animate({
 87             scrollTop: 0
 88           }, 500)
 89         });
 90         $sideToolbar = $(\'#\' + d);
 91 
 92         //通过判断评论框是否存在显示索引目录
 93         var commentDiv = $("#blog-comments-placeholder");
 94 
 95         a.on(\'scroll\', function() {
 96           //评论框存在才调用方法
 97           if(commentDiv.length > 0) {
 98             var t = a.scrollTop();
 99             if(t > k) {
100               $sideToolbar.css(\'display\', \'block\');
101               $(\'#gotop\').show()
102             } else {
103               $sideToolbar.css(\'display\', \'none\')
104               $(\'#gotop\').hide()
105             }
106           }
107         })
108       });
109       //以上是锚点JS
110       //以下是返回顶部JS
111       $(function() {
112         $(\'body\').append(\'<div id="gotop" onclick="goTop();"></div>\');
113       });
114 
115       function goTop(u, t, r) {
116         var scrollActivate = !0;
117         if(scrollActivate) {
118           u = u || 0.1;
119           t = t || 16;
120           var s = 0,
121             q = 0,
122             o = 0,
123             p = 0,
124             n = 0,
125             j = 0;
126           document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
127           document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
128           n = window.scrollX || 0;
129           j = window.scrollY || 0;
130           s = Math.max(s, Math.max(o, n));
131           q = Math.max(q, Math.max(p, j));
132           p = 1 + u;
133           window.scrollTo(Math.floor(s / p), Math.floor(q / p));
134           0 < s || 0 < q ? window.setTimeout(\'goTop(\' + u + \', \' + t + \')\', t) : \'undefined\' != typeof r && r()
135         } else {
136           scrollActivate = !0
137         }
138       }
139       //以上是返回顶部JS
140     </script>
 

/*动态线条*/

color: 线条颜色,默认:‘0,0,0’;三个数字分别为(R,G,B),注意使用,分割
opacity: 线条透明度0~1,默认0.5
count: 线条总数量,默认150
zIndex: 背景的z-Index属性,css用于控制所在层的位置,默认-1
 
 1 <div style = "display:none;">动态线条</div>
 2 <script>
 3 
 4 !function(){
 5 
 6 function n(n,e,t){
 7 
 8 return n.getAttribute(e)||t
 9 
10 }
11 
12 function e(n){
13 
14 return document.getElementsByTagName(n)
15 
16 }
17 
18 function t(){
19 
20 var t=e("script"),o=t.length,i=t[o-1];
21 
22 return{
23 
24 l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.97),c:n(i,"color","220,20,60"),n:n(i,"count",37)
25 
26 }
27 
28 }
29 
30 function o(){
31 
32 a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
33 
34 c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
35 
36 }
37 
38 function i(){
39 
40 r.clearRect(0,0,a,c);
41 
42 var n,e,t,o,m,l;
43 
44 s.forEach(function(i,x){
45 
46 for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
47 
48 null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
49 
50 l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
51 
52 t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
53 
54 }),
55 
56 x(i)
57 
58 }
59 
60 var a,c,u,m=document.createElement("canvas"),
61 
62 d=t(),l="c_n"+d.l,r=m.getContext("2d"),
63 
64 x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
65 
66 function(n){
67 
68 window.setTimeout(n,1e3/45)
69 
70 },
71 
72 w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
73 
74 window.onmousemove=function(n){
75 
76 n=n||window.event,y.x=n.clientX,y.y=n.clientY
77 
78 },
79 
80 window.onmouseout=function(){
81 
82 y.x=null,y.y=null
83 
84 };
85 
86 for(var s=[],f=0;d.n>f;f++){
87 
88 var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
89 
90 }
91 
92 u=s.concat([y]),
93 
94 setTimeout(function(){i()},100)
95 
96 }();
97 
98 </script>
99 <div style = "display:none;"> 动态线条end</div>
博客侧边栏公告全部备份
 

页首Html代码

/*设置目录*/

承接上面的HTML代码还有上面侧边栏代码,要一起复制到后台管理里面才能生效...

1 <link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"/*设置目录(首页HTML代码)*/>

/* 页面HTML/JS部分 页面展开动画*/

承接上面的css样式...CSS写的有点冗余,大家可以根据自己的需求写...可与把他改成一个小动物啥的,随意发挥...

 
 1 <!--  页面HTML/JS部分 页面展开动画-->
 2 <div id="fry_append">
 3  
 4 <div id="fry_sidebar">侧边栏</div>
 5 
 6 </div>
 7 <!-- 页面展开动画-->
 8 <script type="text/javascript">
 9 function my_unfold(){
10     width_main=$(\'#main\').width();
11     height_main=$(\'#main\').height();
12     time=1000;
13     function unfoldLeft(width,height,time) {
14         $(\'#main\').animate({
15             \'width\': \'0%\',
16             \'height\': \'0%\',
17             opacity: \'0\'
18         }, 0,\'linear\');
19         $(\'#main\').animate({
20             \'width\': \'+\'+width_main,
21             \'height\': \'+\'+height_main,
22             opacity: \'1\'
23         }, time,\'linear\');
24     }
25     unfoldLeft(width_main,height_main,time);
26 }
27 </script>
28 
29 <!--END 页面展开动画-->
30 <!-- 展开侧边栏 -->
31 <script type="text/javascript">
32 $(\'#main\').append(\'<div id="fry_append"><hr/><div id="fry_sidebar">侧边栏</div></div>\');
33 $(\'#fry_sidebar\').click(function(){
34     $(\'#mainContent .forFlow\').css({\'margin-right\':\'0px\'});
35     if($(\'#sideBar\').css(\'display\')==\'none\'){
36         var width=$(window).width()*0.93;
37         var width1=$(window).width()*0.97-300;
38         var width2=($(window).width()-280)/2;
39         if(width*0.35<230){
40                 $(\'#mainContent\').css({\'display\':\'none\'});
41                 $(\'#sideBar\').css({\'display\':\'block\',\'width\':\'280\',\'margin-right\':width2+\'px\'});
42         }else{
43                 $(\'#sideBar\').css({\'display\':\'block\',\'width\':\'277px\',\'margin\':\'none\',\'float\':\'right\'});
44                 $(\'#mainContent\').css({\'display\':\'block\',\'width\':width1+\'px\'});
45         }
46     }
47     else{
48         $(\'#sideBar\').css({\'display\':\'none\'});
49         $(\'#mainContent\').css({\'display\':\'block\',\'width\':\'123%\'});
50     }
51 });
52 
53 </script>
 

/*鼠标点击-烟花效果*/

有一个更简单的方法,就是js托管到另一个地方,减少代码量。(下面两种方法都可以实现点击烟花效果,任选其中 一个就可以了)

1 <script src="https://files.cnblogs.com/files/cainiao-chuanqi/mouse-click.js"></script>
2 <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
 
  1 <script type="text/javascript"> 
  2 /*烟花特效*/
  3 class Circle {
  4   constructor({ origin, speed, color, angle, context }) {
  5     this.origin = origin
  6     this.position = { ...this.origin }
  7     this.color = color
  8     this.speed = speed
  9     this.angle = angle
 10     this.context = context
 11     this.renderCount = 0
 12   }
 13 
 14   draw() {
 15     this.context.fillStyle = this.color
 16     this.context.beginPath()
 17     this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
 18     this.context.fill()
 19   }
 20 
 21   move() {
 22     this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
 23     this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
 24     this.renderCount++
 25   }
 26 }
 27 
 28 class Boom {
 29   constructor ({ origin, context, circleCount = 10, area }) {
 30     this.origin = origin
 31     this.context = context
 32     this.circleCount = circleCount
 33     this.area = area
 34     this.stop = false
 35     this.circles = []
 36   }
 37 
 38   randomArray(range) {
 39     const length = range.length
 40     const randomIndex = Math.floor(length * Math.random())
 41     return range[randomIndex]
 42   }
 43 
 44   randomColor() {
 45     const range = [\'8\', \'9\', \'A\', \'B\', \'C\', \'D\', \'E\', \'F\']
 46     return \'#\' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
 47   }
 48 
 49   randomRange(start, end) {
 50     return (end - start) * Math.random() + start
 51   }
 52 
 53   init() {
 54     for(let i = 0; i < this.circleCount; i++) {
 55       const circle = new Circle({
 56         context: this.context,
 57         origin: this.origin,
 58         color: this.randomColor(),
 59         angle: this.randomRange(Math.PI - 1, Math.PI + 1),
 60         speed: this.randomRange(1, 6)
 61       })
 62       this.circles.push(circle)
 63     }
 64   }
 65 
 66   move() {
 67     this.circles.forEach((circle, index) => {
 68       if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
 69         return this.circles.splice(index, 1)
 70       }
 71       circle.move()
 72     })
 73     if (this.circles.length == 0) {
 74       this.stop = true
 75     }
 76   }
 77 
 78   draw() {
 79     this.circles.forEach(circle => circle.draw())
 80   }
 81 }
 82 
 83 class CursorSpecialEffects {
 84   constructor() {
 85     this.computerCanvas = document.createElement(\'canvas\')
 86     this.renderCanvas = document.createElement(\'canvas\')
 87 
 88     this.computerContext = this.computerCanvas.getContext(\'2d\')
 89     this.renderContext = this.renderCanvas.getContext(\'2d\')
 90 
 91     this.globalWidth = window.innerWidth
 92     this.globalHeight = window.innerHeight
 93 
 94     this.booms = []
 95     this.running = false
 96   }
 97 
 98   handleMouseDown(e) {
 99     const boom = new Boom({
100       origin: { x: e.clientX, y: e.clientY },
101       context: this.computerContext,
102       area: {
103         width: this.globalWidth,
104         height: this.globalHeight
105       }
106     })
107     boom.init()
108     this.booms.push(boom)
109     this.running || this.run()
110   }
111 
112   handlePageHide() {
113     this.booms = []
114     this.running = false
115   }
116 
117   init() {
118     const style = this.renderCanvas.style
119     style.position = \'fixed\'
120     style.top = style.left = 0
121     style.zIndex = \'999999999999999999999999999999999999999999\'
122     style.pointerEvents = \'none\'
123 
124     style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
125     style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
126 
127     document.body.append(this.renderCanvas)
128 
129     window.addEventListener(\'mousedown\', this.handleMouseDown.bind(this))
130     window.addEventListener(\'pagehide\', this.handlePageHide.bind(this))
131   }
132 
133   run() {
134     this.running = true
135     if (this.booms.length == 0) {
136       return this.running = false
137     }
138 
139     requestAnimationFrame(this.run.bind(this))
140 
141     this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
142     this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
143 
144     this.booms.forEach((boom, index) => {
145       if (boom.stop) {
146         return this.booms.splice(index, 1)
147       }
148       boom.move()
149       boom.draw()
150     })
151     this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
152   }
153 }
154 
155 const cursorSpecialEffects = new CursorSpecialEffects()
156 cursorSpecialEffects.init()
157 
158 </script>
 

/*设置小心心*/

鼠标点击的爱心特效。。。

 1 <script type="text/javascript">
 2 /*设置小心心*/
 3 (function(window, document, undefined) {
 4     var hearts = [];
 5     window.requestAnimationFrame = (function() {
 6         return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
 7         function(callback) {
 8             setTimeout(callback, 1000 / 60);
 9         }
10     })();
11     init();
12     function init() {
13         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;}");
14         attachEvent();
15         gameloop();
16     }
17     function gameloop() {
18         for (var i = 0; i < hearts.length; i++) {
19             if (hearts[i].alpha <= 0) {
20                 document.body.removeChild(hearts[i].el);
21                 hearts.splice(i, 1);
22                 continue;
23             }
24             hearts[i].y--;
25             hearts[i].scale += 0.004;
26             hearts[i].alpha -= 0.013;
27             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;
28         }
29         requestAnimationFrame(gameloop);
30     }
31     function attachEvent() {
32         var old = typeof window.onclick === "function" && window.onclick;
33         window.onclick = function(event) {
34             old && old();
35             createHeart(event);
36         }
37     }
38     function createHeart(event) {
39         var d = document.createElement("div");
40         d.className = "heart";
41         hearts.push({
42             el: d,
43             x: event.clientX - 5,
44             y: event.clientY - 5,
45             scale: 1,
46             alpha: 1,
47             color: randomColor()
48         });
49         document.body.appendChild(d);
50     }
51     function css(css) {
52         var style = document.createElement("style");
53         style.type = "text/css";
54         try {
55             style.appendChild(document.createTextNode(css));
56         } catch(ex) {
57             style.styleSheet.cssText = css;
58         }
59         document.getElementsByTagName(\'head\')[0].appendChild(style);
60     }
61     function randomColor() {
62         return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
63     }
64 })(window, document);
65 </script>
 

/*自定义的鼠标点击效果*/

 
 1 <script type="text/javascript"> 
 2 /*自定义的鼠标点击效果*/
 3 /* 鼠标特效 */ 
 4 var a_idx = 0; 
 5 jQuery(document).ready(function($) { 
 6     $("body").click(function(e) { 
 7         var a = new Array("富强","*","文明","和谐","菜鸟-传奇","*","平等","公正","法治","菜鸟-传奇","爱国","敬业","诚信","友善","菜鸟-传奇"); 
 8         var $i = $("<span/>").text(a[a_idx]); 
 9         a_idx = (a_idx + 1) % a.length; 
10         var x = e.pageX, 
11         y = e.pageY; 
12         $i.css({ 
13             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
14             "top": y - 20, 
15             "left": x, 
16             "position": "absolute", 
17             "font-weight": "bold", 
18             "color": "rgb(119,136,153)" 
19         }); 
20         $("body").append($i); 
21         $i.animate({ 
22             "top": y - 180, 
23             "opacity": 0 
24         }, 
25         1500, 
26         function() { 
27             $i.remove(); 
28         }); 
29     }); 
30 }); 
31 </script>
页首Html代码全部备份样式
 

页脚Html代码

/*设置目录*/

1 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"/*设置目录(首脚HTML代码)*/></script>

/*图片点击放大*/

 
1 <!-- lightbox的样式/ 图片点击放大效果 -->
2 <link href="https://files.cnblogs.com/files/cainiao-chuanqi/img-css.css" rel="stylesheet">
3 
4 <!-- lightbox.js核心代码 -->
5 <script src="https://files.cnblogs.com/files/cainiao-chuanqi/img.js"></script>
6 <script type=\'text/javascript\'>$(\'#cnblogs_post_body img\').wrap(function(){return "<a href=\'"+$(this).attr("src")+"\' data-lightbox=\'example-set\'></a>"});</script>
7 <script type=\'text/javascript\'>$(".code_img_closed").unwrap();</script>
8 <script type=\'text/javascript\'>$(".code_img_opened").unwrap();</script>
 

补充:点赞样式

点赞动画声明(CSS处)

有一个问题一直没解决,就是小磁怪被目录样式遮挡了。怎么才能让它的控制样式在上面(以解决 :在CSS 小磁怪处加上  z-index:9999 ; )。还有就是它的眼神不能动,明明其他的人就可以@。@

 
  1 //加载进度条
  2 #loadingProcess{
  3   position: absolute;
  4   position: fixed;
  5   top:0;
  6   left: 0;
  7   height: 3px;
  8   box-sizing: border-box;
  9   width: 0%;
 10   background-color: @AccentColor;
 11   background-image: linear-gradient(to right,transparent 0%,transparent 80%,#fff 100% );
 12   border-bottom-right-radius: 1px;
 13   border-top-right-radius: 1px;
 14 }
 15 // 回复中代码片段会遮挡精灵球
 16 .syntaxhighlighter{
 17   z-index: -1
 18 }
 19 /*
 20  * 动画声明
 21  */
 22  // Y轴移动
 23 @keyframes jumping {
 24   0% {
 25     transform: translateY(0px);
 26   }
 27   50% {
 28     transform: translateY(-400px);
 29   }
 30   100% {
 31     transform: translateY(0px);
 32   }
 33 }
 34 
 35 // 小磁怪的眼神动画
 36 @keyframes eyemove {
 37   0% {
 38     transform: translate(0px,0px);
 39   }
 40   20% {
 41     transform: translate(0px,0px);
 42   }
 43   25% {
 44     transform: translate(0px,-10px);
 45   }
 46   45% {
 47     transform: translate(0px,-10px);
 48   }
 49   50% {
 50     transform: translate(0px,0px);
 51   }
 52   60% {
 53     transform: translate(0px,0px);
 54   }
 55   65% {
 56     transform: translate(-8px,0px);
 57   }
 58   85% {
 59     transform: translate(-8px,0px);
 60   }
 61   90% {
 62     transform: translate(0px,0px);
 63   }
 64   100% {
 65     transform: translate(0px,0px);
 66   }
 67 } 
 68 
 69 /*    点赞样式Begin   */
 70 @keyframes jumping {
 71   0% {
 72       transform: translateY(0px);
 73   }
 74   50% {
 75       transform: translateY(-400px);
 76   }
 77   100% {
 78       transform: translateY(0px);
 79   }
 80 }
 81 #div_digg {
 82   bottom: 0px;
 83   bottom: 50px;
 84   margin: 0px;
 85   position: fixed;
 86   right: 0.5rem;
 87   right: 16px;
 88   animation: jumping 5s ease-in-out;
 89   animation-iteration-count: infinite;
 90 }
 91 
 92 .buryit {
 93   display: none;
 94 }
 95 
 96 .diggit { 
 97   background: url(http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_ball2.png) no-repeat;
 98   border-radius: 50%;
 99   box-shadow: 0px 0px 15px 5px #fff inset;
100   cursor: pointer;
101   height: 100px;
102   margin: 0px;
103   padding: 0px;
104   width: 100px;
105   text-align: center;
106 
107   &::before{
108     content: "\8FD9\91CC\662F\70B9\8D5E\54E6";
109     content: "这里是点赞哦";
110 
111     position: absolute;
112     top: -40px;
113     left: 7px;
114     font-size: 14px;
115     left: 0px;
116     font-size: 18px;
117     color: @ThemeColor;
118   }
119 }
120 #div_digg .diggnum {
121   color: #EEE;
122   font-family: Verdana;
123   font-size: 35px;
124   line-height: 2em!important;
125 }
126 #digg_tips{
127   color: #fa5 !important;
128   width: 200px;
129   text-align: center;
130   margin-left: -50px;
131   margin-top: 20px;
132 }
133 
134 a.digg_gray{
135   font-size: 18px;
136 }
137 #xiaociguai{
138   position: fixed;
139   bottom: 0;
140   right: 0;
141   width: 155px;
142   cursor: pointer;
143 }
144 #xiaociguai>img{
145   width: 155px;
146 }
147 #xiaociguai::after{
148   content: \'\';
149   width: 2px;
150   height: 2px;
151   background-color: #666;
152   position: absolute;
153   left: 69px;
154   top: 43px;
155   animation: eyemove 10s ease-in-out;
156   animation-iteration-count: infinite;
157 }
158 #xiaociguai:hover,#xiaociguai.enable-electric{
159   -webkit-filter: saturate(7);
160   filter: saturate(7);
161 }
162 
163 /*    点赞样式End   */
 

小磁怪的吸附效果

 
 1 <!-- 此处放入页首Begin -->
 2     <div id="loadingbar">
 3         <div id="loadingProcess"></div>
 4     </div>
 5     <script type="text/javascript">
 6         var loadingProcess = 0;
 7         var isLoading = true;
 8         var $loadingProcess = $(\'#loadingProcess\');
 9         function loading() {
10             loadingProcess += 1;
11             if (loadingProcess >= 80) {
12                 loadingProcess = 80;
13             }
14             $loadingProcess.css(\'width\', loadingProcess + \'%\');
15             if (!isLoading && loadingProcess === 80) {
16                 $loadingProcess.css(\'width\', \'100%\').hide(200);
17             } else {
18                 requestAnimationFrame(loading);
19             }
20         }
21         loading();
22         $(function () {
23             isLoading = false;
24         })
25     </script>
26     <!-- 此处放入页首End -->
27    <!-- 此处放入页首Begin -->
28    <div id="loadingProcess"></div>
29    <script type="text/javascript">
30        var loadingProcess = 0;
31        var isLoading = true;
32        var $loadingProcess = $(\'#loadingProcess\');
33        function loading() {
34            loadingProcess += 1;
35            if (loadingProcess >= 80) {
36                loadingProcess = 80;
37            }
38            $loadingProcess.css(\'width\', loadingProcess + \'%\');
39            if (!isLoading && loadingProcess === 80) {
40                $loadingProcess.css(\'width\', \'100%\').hide(200);
41            } else {
42                requestAnimationFrame(loading);
43            }
44        }
45        loading();
46        $(function () {
47            // 页面加载完毕,停掉加载动画
48            isLoading = false;
49            // 载入小磁怪
50            if ($(\'#div_digg\').length === 1 || window.location.href.indexOf(\'\/p\/\')!==-1) {
51                $(document.body).append(\'<img id="xiaociguai" title="电磁波切换" alt="电磁波切换" src="http://images.cnblogs.com/cnblogs_com/vvjiang/996881/o_xiaociguai1.jpg" />\')
52                // 绑定停止精灵球跳动按钮
53                var isStopJump = false;
54                $(\'#xiaociguai\').click(function (e) {
55                    if (isStopJump) {
56                        $(\'#div_digg\').css(\'animation\', \'jumping 5s ease-in-out\').css(\'animation-iteration-count\', \'infinite\');
57                        $(\'#xiaociguai\').removeClass(\'enable-electric\')
58                    } else {
59                        $(\'#div_digg\').css(\'animation\', \'unset\');
60                        $(\'#xiaociguai\').addClass(\'enable-electric\')
61                    }
62                    isStopJump = !isStopJump;
63                })
64            }
65        })
66    </script>
67    <!-- 此处放入页首End -->
 

/*补充 添加板娘*/

 
 1 页面定制css 放上这个
 2 /* 看板娘 */
 3 
 4 canvas#live2dcanvas {
 5 border: 0 !important;
 6 left: 0;
 7 }
 8 
 9 /* 看板娘 */
10 
11 页脚Html代码放上这个 
12 <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
13 <script type="text/javascript">
14 L2Dwidget.init();
15 </script>

 

 欢迎大家借鉴与指正