博客园添加动态背景效果

背景动画

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

 (来自官网上的一张图)css

使用食用java

食用方法

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

首先下载其中的canvas-nest.js,而后上传到博客园后台的文件,获得一个连接github

而后在博客园-->设置-->页首Html代码下,插入如下标签canvas

 

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/动画

相关文章
相关标签/搜索