博客界面动态

前言：添加动态特效，首页你的博客要开启Js权限

 

转到设置，在博客侧边栏公告那里，要申请Js权限。上图：我这里是已经开启了的，显示支持JS代码，没有的要申请一下，说明一下原因提交到博客园，一般一天以内都能通过的。

1.背景-动态线条效果

上效果图：

转到设置，在页首html代码这里插入，当然插到页脚那里也可以。script是它的js文件，上图。

<!-- 背景动画---线条 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5; " ></canvas>
<script src="https://blog-static.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

注：之后不再重复。

如果要修改线条颜色，节点，堆叠顺序等，我是直接调用了其他博主的文件，如果要自定义设置的话，可以把js文件下载下来，然后修改后重新上传到自己的博客文件中。

也不需要彻底弄清楚它的原理，直接修改参数就行了，比如颜色color，透明opacity 。修改为自己想要的。

2.背景-动态雪花效果

 上效果图：

 转到设置，在页面定制css里插入样式

#Snow{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;pointer-events: none;}

在侧边栏公告这里添加添加JS和html（其他位置也可以）

<!-- 背景动画---雪花-->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>

3.背景-鼠标点击烟花

上效果图：

 转到设置，插入html代码

<!-- 背景动画---点击烟花 -->
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

4.首页显示头像

转到设置，在博客侧边栏公告插入头像html

<div class="blog-photo"><img src="//pic.cnblogs.com/avatar/812018/20200717112039.png"  class="img_avatar"></div>

头像在侧边栏的位置是靠上还是靠下，这是由你选择的主题而定的。

5.修改滚动条

上效果图：

::-webkit-scrollbar{/*长条*/
    width:10px!important;
    background-color:rgba(168, 168, 168, 0.5);
    -webkit-border-radius:6px;
}
::-webkit-scrollbar-thumb{/*滚动条中间的方块*/
    -webkit-border-radius:6px;
    background-color:rgb(126, 125, 125);
}

6.随笔文章添加导航目录

上效果图：

<script src="http://files.cnblogs.com/files/clwydjgs/scrollspy.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/clwydjgs/stickUp.min.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/ctxsdhy/cnblog-scroller.js" type="text/javascript"></script>