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

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

只需要在网页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. element-ul InputNumber 空白

    if(this.days == undefined){ this.$nextTick(function(){ this.days = 1; }); }

  2. iOS中的过滤器和正则表达式(NSPredicate,NSRegularExpression)

    参考链接:http://www.cocoachina.com/industry/20140321/8024.html NSPredicate Cocoa提供了一个NSPredicate类,它用来指定过 ...

  3. PC端有什么好用的倍速播放的软件?

    倍速播放的目的是让自己可以以更快的速度去看视频, 加快获取信息的效率 potplay吧,和KMP是一个作者.加速播放快捷键是c,减速时x,z恢复正常.下载官网 Global Potplayer

  4. cf615D Multipliers

    Ayrat has number n, represented as it's prime factorization pi of size m, i.e. n = p1·p2·...·pm. Ayr ...

  5. 济南学习 Day 5 T2 am

    車(Rook) [题目描述] 众所周知,車是中国象棋最厉害的棋子之一,他能吃到同一行或者同一列的其他棋子.車显然不能和車在一打起来,于是rly有借来了许多许多車在棋盘上摆了起来...... 他想知道, ...

  6. oracle 连接数据库以及查看当前用户、当前数据库实例

    sql>show user;查看当前用户 sql>show parameter instance_name;查看当前数据库实例 例如: sqlplus登录:用sys用户登录(密码是1234 ...

  7. Mac 快速修改 hosts 文件

    sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /etc/hosts

  8. iOS 设置RGB色的宏

    转自:http://lizhuang.iteye.com/blog/1931768 
//RGB Color macro #define UIColorFromRGB(rgbValue) [UICol ...

  9. openSUSE Leap 15.0 初始配置

    添加源: # 禁用原有软件源 sudo zypper mr -da # 添加阿里镜像源 sudo zypper ar -fc https://mirrors.aliyun.com/opensuse/d ...

  10. Codeforces 667C Reberland Linguistics【DFS】

    一道卡题意的题. 题目链接: http://codeforces.com/problemset/problem/667/C 题意: 一个串可以看成一个长度大于4的根,加上其后面的若干个相邻(in a ...