|
看到评论留言有人问到我的背景是怎么做的，关于这个，我具体说一下吧。
背景的几何线条是采用的nest效果，一个基于html5 canvas绘制的网页背景效果，非常赞！来自github的开源项目canvas-nest,
特性
- 不依赖任何框架或者内库，比如不依赖jQuery，使用原生的javascript。
- 非常小，只有1.66kb，如果开启gzip，可以更小。
- 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。
使用
使用非常简单，感觉都没有必要写这一节内容。
将下面的代码插入到 <body> 和 </body> 之间.
|
1
|
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
|
强烈建议在 </body>标签上方. 例如下面的代码结构:
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
...
</head>
<body>
...
...
...
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
</body>
</html>
|
请注意不要将代码置于 <head> </head>里面.
然后就完成了，打开网页即可看到效果!
配置和配置项
color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割opacity: 线条透明度（0~1）, 默认: 0.5count: 线条的总数量, 默认: 150zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1- Example
|
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
|
这些属性配置在引用js的script标签中，作为它的一个属性值。所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。
不足
CPU占用过高
可以看看你现在的Cpu使用率，我的一般在30%左右，占用挺高的。
优化方法是减少线条的总数量，但是效果会有点折扣，我使用的是默认的配置。
如果你什么都不会，推荐你一个最简单的方法
下载名为canvas-nest-for-wp的插件，安装即可实现效果
what？如果你连安装插件都不会？
QQ或者E-mail联系我，保证不打死你 我手把手教你。
|
