经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
自定义博客园主题样式
来源：cnblogs　　作者：Merak21　　时间：2021/6/21 9:41:17　　对本文有异议

背景知识了解

图片url获取

1.将选定的背景图上传至博客园服务器

将选定的图片上传至自己博客园的相册中

2.获取上传至博客园服务器背景图的url

打开相册，选择需要的背景图片-->单击-->在打开的图片上方右键-->复制图片地址

image-20210617223346231

JS权限申请

目的：后面的添加js特效需要用到

我的博客园-->管理

image-20210617230739126

设置-->博客园侧边栏公告-->点击 申请JS权限

image-20210617231320769

编写申请js权限内容

例：

  1. 尊敬的博客园管理员：
  3. 请问是否可以帮我开通js权限，我想对文章的样式和布局需要js代码进行调整外观。
  5. 谢谢您的帮助。
  1. 尊敬的博客园管理员：
  3. 您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。
  5. 谢谢您的帮助。

随便写一个就行,比较快的话大概一两个小时就能通过,审核不通过多换几个内容试试

通过审核的状态:

image-20210617231432971

自定义设置位置

进入 个人首页--->管理--->设置

image-20210617223558274

页面定制css代码 位置

image-20210617223012137

博客侧边栏公告（支持HTML代码） 位置

image-20210617223138403

页首 HTML 代码 位置

image-20210617223200834

页脚 HTML 代码 位置

image-20210617223229103

模板设置

选择一个你喜欢的模板，后面的代码都是基于你选择的这个模板修改的，可以和我一样选择red_autumnal_leaves

image-20210617223845392

JS文件的下载和上传

目的：把别人服务器上的文件替换你服务器上的，防止别人删除文件你也不能用了。

打开链接，ctrl+s保存

image-20210617224119744 image-20210617224155353

我的首页-->管理-->文件-->选择文件-->选择你刚才下载的js文件-->上传

image-20210617224424921

点击下载可以看到对应的链接

image-20210617224915196 image-20210617224942623

替换前后对比：

https://blog-static.cnblogs.com/files/Merak21/scrollspy.js

https://blog-static.cnblogs.com/files/你的用户名/scrollspy.js

即只要你将文件上传到了你自己的博客园服务器，直接替换用户名就可

彩带跳转

Gitee彩带跳转

将以下代码复制粘贴到 页首 HTML 代码

  1. <a href="https://gitee.com/sunny_21">  
  2. <img style="position: fixed; top: 0; left: 0; border: 0; z-index:9999;" 
  3.      src="https://images.cnblogs.com/cnblogs_com/Merak21/1978140/o_210521135414Gitee.png" 
  4.      alt="Fork me on Gitee">
  5. </a>

效果图展示:

Github彩带跳转

  • 将以下代码复制粘贴到 页首 HTML 代码
  1. <a href="https://github.com/sunny21">  
  2. <img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
  3.   	 src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png" 
  4.   	 alt="Fork me on GitHub">
  5. </a>

  • 说明：

    ? 你需要将 <a href="">中的链接换成您自己的 GitHub 主页地址。

github彩带颜色

绿色

image-20210617232832754

将src中链接替换成以下链接:

  1. https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png

黑色

image-20210617233002773

将src中链接替换成以下链接:

  1. https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png

橘黄色

image-20210617233036103

将src中链接替换成以下链接:

  1. https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png

灰色：

image-20210617233327254

将src中链接替换成以下链接:

  1. https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png

白色：

image-20210617233305643

将src中链接替换成以下链接:

  1. https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png

透明图片背景

  • 将以下代码复制粘贴到 页面定制 CSS 代码
  1. /*simplememory*/
  2. #google_ad_c1, #google_ad_c2 {display:none;}
  3. .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, 
  4. .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, 
  5. .syntaxhighlighter textarea {
  6. font-size: 14px!important;
  7. }
  8. #home {
  9. opacity: 0.80;
  10. margin: 0 auto;
  11. width: 85%;
  12. min-width: 950px;
  13. background-color: #fff;
  14. padding: 30px;
  15. margin-top: 30px;
  16. margin-bottom: 50px;
  17. box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  18. }
  19. #blogTitle h1 {
  20. font-size: 30px;
  21. font-weight: bold;
  22. font-family: "Comic Sans MS";
  23. line-height: 1.5em;
  24. margin-top: 20px;
  25. color: #515151;
  26. }
  27. #navList a:hover {
  28. color: #4C9ED9;
  29. text-decoration: none;
  30. }
  31. #navList a {
  32. display: block;
  33. width: 5em;
  34. height: 22px;
  35. float: left;
  36. text-align: center;
  37. padding-top: 18px;
  38. }
  39. #navigator {
  40. font-size: 15px;
  41. border-bottom: 1px solid #ededed;
  42. border-top: 1px solid #ededed;
  43. height: 50px;
  44. clear: both;
  45. margin-top: 25px;
  46. }
  47. .catListTitle {
  48. margin-top: 21px;
  49. margin-bottom: 10.5px;
  50. text-align: left;
  51. border-left: 10px solid rgba(82, 168, 236, 0.8);
  52. padding: 10px 0 14px 10px;
  53. background-color: #f5f5f5;
  54. }
  55. #ad_under_post_holder #google_ad_c1,#google_ad_c2{  
  56. display: none !important;
  57. }
  58. body {
  59. color: #000;
  60. background: url(http://XXXX.jpg  //你自己的背景图片url
  61. ) fixed;
  62. background-size: 100%;
  63. background-repeat: no-repeat;
  64. font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
  65. font-size: 12px;
  66. min-height: 101%;
  67. }
  68. #topics .postTitle {
  69. border: 0px;
  70. font-size: 200%;
  71. font-weight: bold;
  72. float: left;
  73. line-height: 1.5;
  74. width: 100%;
  75. padding-left: 5px;
  76. }
  78. div.commentform p{
  79. margin-bottom:10px;
  80. }
  81. .comment_btn {
  82. padding: 5px 10px;
  83. height: 35px;
  84. width: 90px;
  85. border: 0 none;
  86. border-radius: 5px;
  87. background: #ddd;
  88. color: #999;
  89. cursor:pointer;
  90. font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
  91. text-shadow: 0 0 1px #fff;
  92. display: inline !important;
  93. }
  94. .comment_btn:hover{
  95. padding: 5px 10px;
  96. height: 35px;
  97. width: 90px;
  98. border: 0 none;
  99. border-radius: 5px;
  100. background: #258fb8;
  101. color: white;
  102. cursor:pointer;
  103. font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
  104. text-shadow: 0 0 1px #fff;
  105. display: inline !important;
  106. }
  107. #commentform_title {
  108. background-image:none;
  109. background-repeat:no-repeat;
  110. margin-bottom:10px;
  111. padding:0;
  112. font-size:24px;
  113. }
  114. #commentbox_opt,#commentbox_opt + p {
  115. text-align:center;
  116. }
  117. .commentbox_title {
  118. width: 100%;
  119. }
  120. #tbCommentBody {
  121. font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
  122. margin-top:10px;
  123. max-width:100%;
  124. min-width:100%;
  125. background:white;
  126. color:#333;
  127. border:2px solid #fff;
  128. box-shadow:inset 0 0 8px #aaa;
  129. // padding:10px;
  130. height:250px;
  131. font-size:14px;
  132. min-height:120px;
  133. }
  134. .feedbackItem {
  135. font-size:14px;
  136. line-height:24px;
  137. margin:10px 0;
  138. padding:20px;
  139. background:#F2F2F2;
  140. box-shadow:0 0 5px #aaa;
  141. }
  142. .feedbackListSubtitle {
  143. font-weight:normal;
  144. }
  146. #blog-comments-placeholder, #comment_form {
  147. padding: 20px;
  148. background: #fff;
  149. -webkit-box-shadow: 1px 2px 3px #ddd;
  150. box-shadow: 1px 2px 3px #ddd;
  151. margin-bottom: 50px;
  152. }
  153. .feedback_area_title {
  154. margin-bottom: 15px;
  155. font-size: 1.8em;
  156. }
  157. .feedbackItem {
  158. border-bottom: 1px solid #CCC;
  159. margin-bottom: 10px;
  160. padding: 5px;
  161. background: rgb(248, 248, 248);
  162. }
  163. .color_shine {background: rgb(226, 242, 255);}
  164. .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
  165. #comment_form .title {
  166. font-weight: normal;
  167. margin-bottom: 15px;
  168. }

  • 说明 ：
    #home 中的 opacity: 0.80; 表示主页面透明度 width: 85%;表示主页面所占宽
    将body模块下的参数"background”url的值修改为你上传到博客园的背景图片url，保存就可以了

  • 效果图展示

    33333png

鼠标点击文字特效、烟花特效

烟花特效

  • 将以下代码复制粘贴到 页尾HTML代码
  1. <script src="https://blog-static.cnblogs.com/files/Merak21/cursor-effects.js"></script>
  2. <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

  • 效果图展示

    image-20210617235449285

文字特效

  • 将以下代码复制粘贴到 页脚HTML代码
  1. <!-- 鼠标点击特效 -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. var a_index = 0;
  5. $("body").click(function(e){
  6. var a = new Array("?北冥是个?","?阳光?","?洒脱?","?孑然?","?真淳?","?不羁?","?随和?","?浪漫?","?富有责任心?","?爱你?","?的美男子?");
  7. var $i = $("<span/>").text(a[a_index]);
  8. a_index = (a_index + 1) % a.length;
  9. var x = e.pageX,y = e.pageY;
  10. $i.css({
  11. "z-index": 99999,
  12. "top": y - 20,
  13. "left": x,
  14. "position": "absolute",
  15. "font-weight": "bold",
  16. "color": randomColor()
  17. });
  18. $("body").append($i);
  19. $i.animate({"top": y-180,"opacity": 0},1500,function() {
  20. $i.remove();
  21. });
  22. function randomColor(){
  23. let r = Math.floor(Math.random()*256)
  24. let g = Math.floor(Math.random()*256)
  25. let b = Math.floor(Math.random()*256)
  26. return "rgb("+r+','+g+','+b+")"
  27. }
  28. });
  29. });
  30. </script>

  • 效果图展示

    image-20210617235328968

目录导航效果

目录导航效果一

  • 将以下代码复制粘贴到 页脚HTML代码
  1. <script src="https://blog-static.cnblogs.com/files/Merak21/bootstrap.min.js"></script>
  2. <link href="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.css" rel="stylesheet">
  3. <script type="text/javascript" src="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.WhiteTears.js"></script>
  • 说明：
    只有h1标题会显示
  • 效果图展示

目录导航效果二

将以下代码复制到 页首HTML代码

  1. <link href="http://files.cnblogs.com/files/Merak21/cnblog-scroller3.css" type="text/css" rel="stylesheet">
  2. <script src="http://files.cnblogs.com/files/Merak21/scrollspy.js" type="text/javascript"></script>
  3. <script src="http://files.cnblogs.com/files/Merak21/stickUp.min.js" type="text/javascript"></script>
  4. <script src="http://files.cnblogs.com/files/Merak21/cnblog-scroller.js" type="text/javascript"></script>

将以下代码复制到 页面定制 CSS 代码

  1. /*添加滚动条*/
  2. #sideBarMain ul {
  3.     line-height: 1.5em;
  4.     overflow: auto;
  5.     max-height: 600px;
  6. }

  • 说明：

    h1-h6标题都会显示

    max-height 可以自定义导航栏的最大高度

    为了不影响观看效果，可以将博客侧边栏的选项全部关闭

    我的博客-->管理-->选项-->侧边栏控件-->全部不选

    image-20210617234850072

  • 效果图展示：

image-20210617234148603

悬浮点赞，反对隐藏效果

  • 将以下代码复制到 页面定制 CSS 代码
  1. #div_digg{
  2.   padding: 5px;
  3.   border-radius: 5px;
  4.   position: fixed;
  5.   left: 0;
  6.   bottom: 80px;
  7.   width:80px;
  8.   z-index:100;
  9. }
  10. .diggit{
  11.   background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
  12.   width: 60px;
  13.   height: 60px;
  14. }
  15. #div_digg .diggnum{
  16.   position: absolute;
  17.   bottom: -20px;
  18.   left: 6px;
  19.   background: #D0D0D0;
  20.   padding: 2px 0;
  21.   display: block;
  22.   color: #555;
  23.   font-size: 12px;
  24.   text-align: center;
  25.   width: 60px;
  26.   -moz-border-radius: 4px;
  27.   -webkit-border-radius: 4px;
  28.   font-weight: bold;
  29. }
  30. /* 删除反对按钮,有点邪恶了 */
  31. .buryit{
  32.   display: none;
  33. }
  • 说明：如果需要调整点赞位置，可用F12进行调试，详细可参考本博客最后一条
  • 效果图展示

小火箭置顶特效

  • 将以下代码复制到 页首HTML代码
  1. <script>
  2.        function func(){
  3.            var tag = document.getElementById('i1');
  4.            var content = tag.innerText;
  5.            var f = content.charAt(0);
  6.            var l = content.substring(1,content.length);
  7.            var new_content = l + f;
  8.            tag.innerText = new_content;
  9.        }
  10.        setInterval('func()',1600);
  11.     </script>
  13. <span id="back-to-top"><a href="#top">返回顶部</a></span>
  14. <style>
  15. #back-top {
  16.      position: fixed;
  17.      bottom: 10px;
  18.      right: 5px;
  19.      z-index: 99;
  20. }
  21. #back-top span {
  22.      width: 50px;
  23.      height: 64px;
  24.      display: block;
  25.      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
  26. }
  27. #back-top a{outline:none}
  28. </style>
  29. <script type="text/javascript">
  30. $(function() {
  31.     // hide #back-top first
  32.     $("#back-top").hide();
  33.     // fade in #back-top
  34.     $(window).scroll(function() {
  35.         if ($(this).scrollTop() > 500) {
  36.             $('#back-top').fadeIn();
  37.         } else {
  38.             $('#back-top').fadeOut();
  39.         }
  40.     });
  41.     // scroll body to 0px on click
  42.     $('#back-top a').click(function() {
  43.         $('body,html').animate({
  44.             scrollTop: 0
  45.         }, 800);
  46.         return false;
  47.     });
  48. });
  49. </script>
  50. <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
  • 效果图展示

标题样式特效

  • 将以下代码复制到 页面定制CSS代码
  1. /* 标题样式 */
  2. #cnblogs_post_body h1 {
  3.     background: linear-gradient(to bottom , #f37001,rgb(255 255 255 / 10%));
  4.     border-radius: 6px 6px 6px 6px;
  5.     box-shadow: 0 0 0 1px #ffb9a9, 1px 1px 4px 1px rgb(255 95 95 / 78%);
  6.     color: #FFFFFF;
  7.     font-family: "微软雅黑", "宋体", "黑体", Arial;
  8.     font-size: 20px;
  9.     font-weight: bold;
  10.     height: 30px;
  11.     line-height: 29px;
  12.     margin: 18px 0 !important;
  13.     padding: 5px 0 5px 10px;
  14.     text-shadow: 2px 2px 3px #a70505;
  15.     text-align:center
  16. }
  19. #cnblogs_post_body h2 {
  20.     background: linear-gradient(to bottom , #b930ff,rgb(255 255 255 / 10%));
  21.     border-radius: 6px 6px 6px 6px;
  22.     box-shadow: 0 0 0 1px #ebbaff, 1px 1px 4px 1px rgb(156 56 181 / 72%);
  23.     color: #FFFFFF;
  24.     font-family: "微软雅黑", "宋体", "黑体", Arial;
  25.     font-size: 15px;
  26.     font-weight: bold;
  27.     height: 23px;
  28.     line-height: 23px;
  29.     margin: 12px 0 !important;
  30.     padding: 5px 0 5px 10px;
  31.     text-shadow: 2px 2px 3px #9d65ca;
  32.     text-align:center
  33. }
  35. #cnblogs_post_body h3 {
  36.     background: linear-gradient(to bottom , #5efd35,rgb(255 255 255 / 10%));
  37.     border-radius: 6px 6px 6px 6px;
  38.     box-shadow: 0 0 0 1px #ccffab, 1px 1px 6px 1px rgb(4 117 8 / 84%);
  39.     color: #FFFFFF;
  40.     font-family: "微软雅黑", "宋体", "黑体", Arial;
  41.     font-size: 12px;
  42.     font-weight: bold;
  43.     height: 21px;
  44.     line-height: 21px;
  45.     margin: 12px 0 !important;
  46.     padding: 5px 0 5px 10px;
  47.     text-shadow: 2px 2px 3px #36a019;
  48.     text-align:center
  49. }
  51. #cnblogs_post_body h4 {
  52.     background: linear-gradient(to bottom , #37fff6,rgb(255 255 255 / 10%));
  53.     border-radius: 6px 6px 6px 6px;
  54.     box-shadow: 0 0 0 1px #afffff, 1px 1px 6px 1px rgb(4 101 101 / 78%);
  55.     color: #FFFFFF;
  56.     font-family: "微软雅黑", "宋体", "黑体", Arial;
  57.     font-size: 13px;
  58.     font-weight: bold;
  59.     height: 16px;
  60.     line-height: 18px;
  61.     margin: 18px 0 !important;
  62.     padding: 5px 0 5px 10px;
  63.     text-shadow: 2px 2px 3px #059081;
  64.     text-align:center
  65. }
  66. /* 标题样式设置结束 */
  • 说明: text-align:center 标题居中显示 font-size: 13px; 字体值大小 line-height: 18px; 字体位置 ，可自行更改
  • 效果图展示

禁止页内复制

  • 将以下代码复制到 页首HTML代码
  1. <script language="Javascript">
  2. document.body.onselectstart = document.body.ondrag = function() {return false; }
  3. </script>

代码复制操作移入代码框内悬停显示

  • 将以下代码复制到 页面定制 CSS 代码
  1. /*添加按钮*/
  2. .cnblogs-markdown pre {
  3.   position: relative;
  4. }
  5. .cnblogs-markdown pre > span {
  6.   position: -webkit-sticky;
  7.   position: sticky;
  8.   top: 0;
  9.   right: 0;
  10.   border-radius: 2px;
  11.   padding: 0 10px;
  12.   font-size: 12px;
  13.   background: rgba(0, 0, 0, 0.4);
  14.   color: #fff;
  15.   cursor: pointer;
  16.   display:none;
  17. }
  18. .cnblogs-markdown pre:hover > span {
  19.   display:block;
  20. }
  21. .cnblogs-markdown pre > .copyed {
  22.   background: #0c7100;
  23. }
  • 效果图展示
image-20210618003128315

代码添加滚动条、显示隐藏代码按钮

超过固定高度给代码添加滚动条

  • 复制粘贴以下代码到 页脚html代码
  1. <script>
  2.     // 高度大于300的添加滚动条
  3.      $('pre').each(function (ind, dom) {
  4.         if ($(dom).css('height').slice(0, -2) > 300) {
  5.              $(dom).css('height', '300px');
  6.              $(dom).css('overflow', 'auto');
  7.          }
  8.      })
  9. </script>
  • 说明：这个是设置的高度大于300的代码添加滚动条，如果需要其他高度，请在 slice(0, -2) > 300 'height', '300px' 中更改相应值
  • 效果图展示

超过固定高度给代码添加显隐按钮

  • 将以下代码复制到 页脚HTML代码
  1. <script>
  2.     // 高度大于600的添加滚动条
  3.     // $('pre').each(function (ind, dom) {
  4.     //     if ($(dom).css('height').slice(0, -2) > 600) {
  5.     //         $(dom).css('height', '600px');
  6.     //         $(dom).css('overflow', 'auto');
  7.     //     }
  8.     // })
  10.     // 高度大于600的添加显示隐藏按钮
  11.     $('pre').each(function (ind, dom){
  12.         if ($(dom).css('height').slice(0, -2) > 500) {
  13.             var mybtn = document.createElement('button');
  14.             $(mybtn).html('↓ShowCode↓');
  15.             $(mybtn).css({'border-radius': '4px','background-color':'lightblue','cursor':'pointer','border-color':'lightblue'});
  16.             $(mybtn).insertBefore($(dom));
  17.             $(dom).css('display', 'none');
  18.             $(mybtn).click(function () {
  19.                 if($(mybtn).html()=='↓ShowCode↓'){
  20.                     $(dom).css('display', 'block');
  21.                     $(mybtn).html('↓CloseCode↓');
  22.                 }else {
  23.                     $(dom).css('display', 'none');
  24.                     $(mybtn).html('↓ShowCode↓');
  25.                 }
  26.             })
  27.         }
  28.     });
  29. </script>

  • 说明：这个是设置的高度大于600的代码添加按钮，如果需要其他值，请自行更改相应值

  • 效果图展示

    image-20210618000036083

雪花飘落特效、动态线条特效

雪花特效一

  • I、将以下代码复制到 页面定制CSS代码
  1. #Snow{
  2.     position: fixed;
  3.     top: 0;
  4.     left: 0;
  5.     width: 100%;
  6.     height: 100%;
  7.     z-index: 99999;
  8.     background: rgba(255,255,240,0.1);
  9.     pointer-events: none;
  10. }

II、将以下代码复制到 博客侧边栏公告处(要申请支持js代码)

  1. <!--雪花-->
  2. <div class="Snow">
  3.     <canvas id="Snow"></canvas>
  4. </div>
  5. <script src="https://files.cnblogs.com/files/Merak21/snow.js"></script>
  • 效果图展示

雪花特效二

  • 将以下代码复制到 页脚HTML代码
  1. <script type="text/javascript">
  2.    window.onload = function () {
  3.                 var minSize = 10; //最小字体
  4.                 var maxSize = 20;//最大字体
  5.                 var newOne = 100; //生成雪花间隔
  6.                 var flakColor = "#f5f5f5fa"; //雪花颜色
  7.                 var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定义一个雪花
  8.                 var dhight = $(window).height(); //定义视图高度
  9.                 var dw =$(window).width()-80; //定义视图宽度
  10.                 setInterval(function(){
  11.                 var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
  12.                 var startLeft = Math.random()*dw; //雪花生成是随机的left值
  13.                 var startOpacity = 0.7+Math.random()*0.3; //随机透明度
  14.                 var endTop= dhight-100; //雪花停止top的位置
  15.                 var endLeft= Math.random()*dw; //雪花停止的left位置
  16.                 var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同
  17.                 flak.clone().appendTo($("body")).css({
  18.                 "left":startLeft ,
  19.                 "opacity":startOpacity,
  20.                 "font-size":sizeflak,
  21.                 "color":flakColor
  22.                 }).animate({
  23.                 "top":endTop,
  24.                 "left":endLeft,
  25.                 "apacity":0.1
  26.                 },durationfull,function(){
  27.                 $(this).remove()
  28.                 });
  29.                 },newOne);
  30.             }
  31.  </script>
  • 效果图展示

动态线条特效

将以下代码复制到 博客侧边栏公告处

  1. <div style = "display:none;">动态线条</div>
  2. <script>
  3. !function(){
  4. function n(n,e,t){
  5. return n.getAttribute(e)||t
  6. }
  7. function e(n){
  8. return document.getElementsByTagName(n)
  9. }
  10. function t(){
  11. var t=e("script"),o=t.length,i=t[o-1];
  12. return{
  13. l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
  14. }
  15. }
  16. function o(){
  17. a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
  18. c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
  19. }
  20. function i(){
  21. r.clearRect(0,0,a,c);
  22. var n,e,t,o,m,l;
  23. s.forEach(function(i,x){
  24. 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],
  25. null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
  26. l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
  27. 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()))
  28. }),
  29. x(i)
  30. }
  31. var a,c,u,m=document.createElement("canvas"),
  32. d=t(),l="c_n"+d.l,r=m.getContext("2d"),
  33. x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
  34. function(n){
  35. window.setTimeout(n,1e3/45)
  36. },
  37. 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,
  38. window.onmousemove=function(n){
  39. n=n||window.event,y.x=n.clientX,y.y=n.clientY
  40. },
  41. window.onmouseout=function(){
  42. y.x=null,y.y=null
  43. };
  44. for(var s=[],f=0;d.n>f;f++){
  45. 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})
  46. }
  47. u=s.concat([y]),
  48. setTimeout(function(){i()},100)
  49. }();
  50. </script>
  51. <div style = "display:none;"> 动态线条end</div>

2、效果图展示

樱花飘落特效

樱花飘落特效一

效果：飘落两三页会停

  • 将以下代码复制粘贴到 页首HTML代码

    1. <script src="https://files.cnblogs.com/files/Merak21/sakuraPlus.js"></script>

  • 效果图展示：

    image-20210618001158362

樱花飘落特效二

效果：一直飘落

  • 将以下代码复制粘贴到 页首HTML代码
  1. <script src="https://files.cnblogs.com/files/Merak21/sakura.js"></script>

  • 效果图展示：

    image-20210618001223821

版权信息效果

1、 将以下代码复制到 页面定制CSS代码

  1. #MySignature　　{　　 border:solid 1px #E5E5E5;
  3. 　　　　　　　　　　　　　　padding:10px;
  5. 　　　　　　　　　　　　　　background:#FFFEFE url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
  6. 　　　　　　　　　　　　　　padding-left:80px;}
  7. #MySignature div{line-height: 25px;}

2、将以下代码复制贴到 博客签名

  1. <div>作者：<a href="https://www.cnblogs.com/Merak21/" target="_blank">Merak</a></div>
  2. <div>出处：<a href="https://www.cnblogs.com/Merak21/" target="_blank">https://www.cnblogs.com/Merak21/</a></div>
  3. <div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。 </div>
  • 说明：
    博客签名位置：管理-->博客签名-->标题(随便写)-->内容(上面代码)-->保存

  • 效果图展示

正文图片悬停放大特效

  • 将以下代码复制到 页面定制 CSS 代码
  1. .post img {
  2.     cursor: pointer;
  3.     transition: all 0.5s;
  4. }
  5. .post img:hover {
  6.     transform: scale(1.3);
  7. }
  • 效果图展示
image-20210618000749680

评论效果

  • 将以下代码复制到 页首html代码
  1. <link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

? 将以下代码复制到 页脚html代码

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('#blogTitle h1').addClass('bounceInLeft animated');
  4.     $('#blogTitle h2').addClass('bounceInRight animated');
  5.     // 删除反对按钮
  6.     $('.buryit').remove();
  7.     initCommentData();
  8. });
  9. function initCommentData() {
  10.     $('.feedbackItem').each(function() {
  11.         var text = $(this).find('.feedbackListSubtitle .layer').text();
  12.         // 将楼层信息放到data里面
  13.         // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
  14.         if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
  15.         var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
  16.         $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
  17.     });
  18. }
  20. $(document).ajaxComplete(function(event, xhr, settings) {
  21.   // 监听获取评论ajax事件
  22.   if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
  23.     initCommentData();
  24.   }
  25. });
  26. </script>
  • 效果展示

打赏效果

  • 将以下代码复制到 页首html
  1. <!-- 打赏插件 -->
  2. <script>
  3. window.tctipConfig = {
  4. imagePrefix: "http://files.cnblogs.com/files/kdy11/",
  5. cssPrefix: "http://files.cnblogs.com/files/kdy11",
  6. buttonImageId: 4,
  7. buttonTip: "dashang",
  8. list:{
  9. alipay: {qrimg: "http://files.cnblogs.com/files/xxx/zfb.bmp"}, 
  10. weixin:{qrimg: "http://files.cnblogs.com/files/xxx/wx.bmp"},
  11. }
  12. };
  13. </script>
  14. <script src="https://blog-static.cnblogs.com/files/Merak21/ch_tctip01.js"></script>

  • 说明

    ? 将支付宝收款码和微信收款码上传到博客园相册

    ? alipay:{qrimg:"xxx.bmp"}， xxx.bmp 里改成自己上传的支付宝收款码图片链接

    ? weixin:{qrimg:"xxx.bmp"}， xxx.bmp 里改成自己上传的微信收款码图片链接

  • 效果图展示

image-20210618000456578

附:特效位置颜色调试

image-20210618041508852 image-20210618041900504 image-20210618042345797

调试好后将CSS样式放在 页面定制CSS代码 保存即可

可参考【详细图解】一步一步教你自定义博客园（cnblog）界面

参考链接

小白如何在博客园上创建一个自己的超美化博客

如何在博客园添加 Fork me on GitHub 彩带效果

博客园添加版权签名

【详细图解】一步一步教你自定义博客园（cnblog）界面

博客园美化（最全）

【CSS】渐变背景（background-image）

一行代码引入博客园樱花飘落特效

博客园文章自动生成导航目录

原文链接：http://www.cnblogs.com/Merak21/p/14797843.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号