超赞的网页背景效果分享

一个基于html5 canvas绘制的网页背景效果,非常赞!如果需要 wordpress插件,在插件库搜索 canvas-nest 或者看看项目 canvas-nest-for-wp

特性:

不依赖任何框架或者内库,比如不依赖 jQuery,使用原生的 javascript。

非常小,只有1.6 kb,如果开启 gzip,可以更小。

非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。

使用:

将下面的代码插入到 /body 之前 (本主题修改的是 footer.php 文件)

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>  

本地下载及其路径:canvas-nest.min.js

强烈建议在 标签上方. 例如下面的代码结构:

<html>  
<head>  
    ...  
</head>  
<body>  
    ...  
    ...  
    ...  
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>  
</body>  
</html>  

打开网页即可看到效果,请注意不要将代码置于 里面。

配置和配置项:

color: 线条颜色, 默认: '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="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>  

本项目的Javascript文件已经存储在CDN上,可以直接使用,地址为: http://www.bootcdn.cn/canvas-nest.js/ 如果你不需要 CDN 或者有自己的 CDN,可以直接下载源码 dist 目录中的 canvas-nest.min.js,然后相应的修改使用地址即可。

参考文章:
canvas-nest.js/README-zh.md at master
https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md

超赞的网页背景效果分享
http://www.heminjie.com/network/6216.html


 继续浏览关于 技术有趣 的文章

 本文最后更新于 2019/06/22 17:03:02,可能因经年累月而与现状有所差异

 引用转载请注明:icret > 教程,有趣 > 超赞的网页背景效果分享