Xcnte

给网页添加一个基于canvas绘制的背景效果
一个非常不错的网页背景效果,跟随鼠标变幻的动态线条,一个基于canvas绘制的网页背景效果。
扫描右侧二维码阅读全文
21
2019/02

给网页添加一个基于canvas绘制的背景效果

一个非常不错的网页背景效果,跟随鼠标变幻的动态线条,一个基于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>

然后就完成了,清理缓存打开网页即可看到效果

Last modification:April 27th, 2019 at 09:00 am
如果觉得我的文章对你有所帮助,请随意赞赏

Leave a Comment

6 comments

  1. M_sea

    您好,这个背景效果在下方无法显示,请问可以修一下吗?

    1. Xcnte
      @M_sea

      改一下js文件即可

      1. M_sea
        @Xcnte

        请问具体改哪里呢?

  2. 苍蓝

    赞一个
    滴!签到卡!请上车的乘客系好安全带,现在是:Thu May 16 2019 21:11:02 GMT+0800 (中国标准时间)

  3. 心语难诉

    相当专业

  4. Yotury

    不错