博客园添加动态背景效果

Posted 2021-01-22 lfri

背景动画

先直接看效果吧，还是挺有趣的

 （来自官网上的一张图）

使用食用

食用方法

先良心安利js写的动画库。其原理就是基于 html5 新特性 canvas，渲染的动画效果。有兴趣可以访问一下：动画库原地址，里面有使用方法的详细介绍，这里不赘述了。

首先下载其中的canvas-nest.js,然后上传到博客园后台的文件，得到一个链接

然后在博客园-->设置-->页首Html代码下，插入以下标签

 

1 <!-- 背景动画 -->
2 <script type="text/javascript" color="0,0,255" opacity=‘0.7‘ zIndex="-2" count="99" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>

• color: 线条颜色，默认：‘0，0，0’；三个数字分别为(R,G,B),注意使用，分割
• opacity: 线条透明度0~1,默认0.5
• count: 线条总数量，默认150
• zIndex: 背景的z-Index属性，css用于控制所在层的位置，默认-1

 

参考链接：https://dunwu.github.io/blog/2017/11/13/others/cnblog/