博客园自定义
参考：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 + \'  </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 + \'  </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 + \'  </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>
欢迎大家借鉴与指正