先上图 (看博客空白处也可以呦):

前一阵浏览网站的时候,发现了这个好玩的东西,一直想找找怎么实现的,今天忙里偷闲,上网搜了一下,发现实现起来特别简单。

只需要在网页body里引入一个<script>标签即可,代码如下:

<script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

(ps:不过从这个地址下载js文件可能会比较慢,想要使用的话可以从Github下载源码放到本地)

解释下script上的参数:

count  :线条数量。

zindex :层级。

opacity:透明度。

color   :线条颜色。最好用RGB颜色。

最后附上github上的源码:canvas-nest.js

怎么样是不是特别简单^_^。

 (以上,祝愉快!)

网页 H5“线条” 特效实现方式(canvas-nest)的更多相关文章

  1. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  2. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 使用chrome查看网页上效果的实现方式

    使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...

  5. 7种html5css3网页图片展示特效代码

    鼠标拖拽图片渐变透明切换特效 mobile手机左右滑动切换幻灯片 游戏透明提示图层幻灯片特效 可以编辑滚动条灯片颜色的scroll插件 几种文字动画显示插件代码 360度背景图片旋转的css3动画 左 ...

  6. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  7. Hexo瞎折腾系列(9) - 网页标题崩溃特效

    前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化:并按照文章所说自行修改代码或文件. 为网页添加标题崩溃特效 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. wordpress背景添加跟随鼠标动态线条特效

    今天看到别人的博客,在鼠标移动背景时会出现线条动态特效 感觉挺有意思的,还有另一种,在背景点击时会跳出字符特意去找了方法,以为需要添加代码的,结果只要安装个插件就可以了,所以说wordpress就是方 ...

随机推荐

  1. MapReduce和Hadoop流

    MapReduce:分布式计算的框架 MapReduce是一个软件框架,可以将单个计算作业分配给多台计算机执行. MapReduce在大量节点组成的集群上运行.它的工作流程是:单个作业被分成很多小份, ...

  2. LightOJ——1066Gathering Food(BFS)

    1066 - Gathering Food   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB W ...

  3. BZOJ 1419 Red is good ——期望DP

    定义f[i][j]表示还剩i张红牌,j张黑牌的时候能取得的期望最大值 显然有$f[i][j]=max(0,\frac {i}{i+j}(f[i-1][j]+1)+ \frac {j}{i+j}(f[i ...

  4. [luoguP2331] [SCOI2005]最大子矩阵(DP)

    传送门 orz不会做... 一个好理解的做法(n^3*k): 分n=1和n=2两种情况考虑. n=1时,预处理出前缀和sum[]. 设f[i][j]为到达第i格,已经放了j个子矩阵的最大和, 那么每次 ...

  5. concurrentHashMap面试题

    面试题: ConcurrentHashMap有哪些构造函数? ConcurrentHashMap使用什么技术来保证线程安全? ConcurrentHashMap的get方法是否要加锁,为什么? Con ...

  6. 星球大战 BZOJ 1015

    星球大战 [问题描述] 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  7. WAMP本地环境升级php版本--第二次尝试

    wamp 环境下 php5.6.25 升级php7.1.17 实践 本文参考:https://www.cnblogs.com/hubaohua1588/p/6884146.html来进行操作. 1.从 ...

  8. 微信小程序项目结构

  9. tar [options] [list of file]

    打包:zcvf 解压:zxvf -c 创建新档案文件 -x 从档案文件中解出文件(释放文件) -v (verbose)显示tar命令执行的详细过程 -f 指定目标为一个文件而不是一个设备 -z 调用g ...

  10. Java中String字符串toString()、String.valueOf()、String强转、+ ""的区别

    Object#toString(): Object object = getObject(); System.out.println(object.toString()); 在这种使用方法中,因为ja ...