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

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

只需要在网页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. 【HTML/XML 1】HTML 速成总结

    导读:反反复复的看完了HTML的速成材料,前面学习了牛腩,所以这块知识只能是作为一种旧知识的复习.和机房重构时的SQLHelper一样,刚开始都是稀里糊涂的用了,后面系统的学习后,才知道为什么要那样用 ...

  2. 【Luogu】P1122最大子树和(DFS,树上DP)

    题目链接 感觉自己DP好烂啊   道道看题解 钦定1为根,DFS搜索子树权值.如果子树权值大于0就将当前节点加上子树权值,反之就把子树扔掉.最后在所有节点的权值中寻找最优解. void dfs(int ...

  3. 刷题总结——郁闷的出纳员(bzoj1503)

    题目: 题目背景 NOI2004 DAY1 T1 题目描述 OIER 公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是 ...

  4. [POJ1664] 放苹果 (动态规划,组合数学)

    题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分发(5,1,1和1,1,5是同一种方法) 输入输出格式 输入格式: 第一行是测试数据的数目t(0 <= ...

  5. 转载:CMarkUp使用简介

    转载地址:http://blog.csdn.net/jonathandj/article/details/4320725 最近正在研究C++下的XML分析工具CMarkup.初次和XML相遇是基于C# ...

  6. 【bzoj1483】[HNOI2009]梦幻布丁 set

    [bzoj1483][HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2 ...

  7. 【Git】Git 本地的撤销修改和删除操作

    一:撤销操作 比如我现在在readme.txt文件里面增加一行 内容为555555555555,我们先通过命令查看如下: 在我未提交之前,我发现添加5555555555555内容有误,所以我得马上恢复 ...

  8. MongoDB数据关系的表达

    虽说MongoDB是非关系型数据库,但由于大部分情况下数据之间是存在关系的,所以MongoDB也需要一些方式来表达数据之间的关系.MongoDB表达数据关系的方式有两种:文档嵌套和数据库引用. 一.文 ...

  9. centos7 安装teamviewer 报错libQt5WebKitWidgets.so.5()(64bit)

    https://blog.csdn.net/kenny_lz/article/details/78884603

  10. Dfs学习经验(纸上运行理解DFS)【两道题】

    首先我想吐槽的是,在CSDN上搞了好久还是不能发博客,就是点下发表丝毫反应都没有的,我稍微百度了几次还是没有找到解决方法,在CSDN的BBS上也求助过管理员但是没有收到答复真是烦躁,导致我新生入学以来 ...