博客园添加动态背景效果

背景动画

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

 (来自官网上的一张图)

使用食用

食用方法

先良心安利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/

 

posted @ 2018-11-24 09:20  Rogn  阅读(6187)  评论(10编辑  收藏  举报