一个非常不错的网页背景效果,跟随鼠标变幻的动态线条,一个基于canvas绘制的网页背景效果。
效果
具体请看本站背景
特点
1. 不依赖任何框架或者内库,如不依赖jQuery
;
2. 使用原生的 javascript
,只有1.6kb,如果开启 gzip,可以更小;
3. 使用外链非常容易实现,配置简单,即使你不是web开发者,也能简单搞定;
4. 模块化 & 区域渲染。
配置
color
: 线条颜色, 默认: '0,0,0'
;三个数字分别为(R,G,B),注意用,分割
pointColor
: 交点颜色, 默认: '0,0,0'
;三个数字分别为(R,G,B),注意用,分割
opacity
: 线条透明度(0~1), 默认: 0.5
count
: 线条的总数量, 默认: 150
zIndex
: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
例如:<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="canvas-nest.js"></script>
下载
使用
将下面的代码插入到主题的footer.php
的</body>
前
<script type="text/javascript" src="你存放的路径"></script>
强烈建议在 </body>
标签上方. 例如下面的代码结构:
<html>
<head>
...
</head>
<body>
...
...
<script type="text/javascript" src="你存放的路径"></script>
</body>
</html>
然后就完成了,清理缓存打开网页即可看到效果
版权属于:Xcnte' s Blog(除特别注明外)
本文链接:https://xcnte.com/archives/468/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!
7 comments
滴!访客卡!请上车的乘客系好安全带,现在是:Tue Feb 18 2020 11:09:22 GMT+0800 (中国标准时间)
为什么我的到了文章页面效果就没有了
您好,这个背景效果在下方无法显示,请问可以修一下吗?
改一下js文件即可
赞一个
滴!签到卡!请上车的乘客系好安全带,现在是:Thu May 16 2019 21:11:02 GMT+0800 (中国标准时间)
相当专业
不错