网页 H5“线条” 特效实现方式(canvas-nest)
先上图 (看博客空白处也可以呦):

前一阵浏览网站的时候,发现了这个好玩的东西,一直想找找怎么实现的,今天忙里偷闲,上网搜了一下,发现实现起来特别简单。
只需要在网页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)的更多相关文章
- 前端绘图方式Canvas和SVG的区别
Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...
- EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码
背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 使用chrome查看网页上效果的实现方式
使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...
- 7种html5css3网页图片展示特效代码
鼠标拖拽图片渐变透明切换特效 mobile手机左右滑动切换幻灯片 游戏透明提示图层幻灯片特效 可以编辑滚动条灯片颜色的scroll插件 几种文字动画显示插件代码 360度背景图片旋转的css3动画 左 ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- Hexo瞎折腾系列(9) - 网页标题崩溃特效
前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化:并按照文章所说自行修改代码或文件. 为网页添加标题崩溃特效 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- wordpress背景添加跟随鼠标动态线条特效
今天看到别人的博客,在鼠标移动背景时会出现线条动态特效 感觉挺有意思的,还有另一种,在背景点击时会跳出字符特意去找了方法,以为需要添加代码的,结果只要安装个插件就可以了,所以说wordpress就是方 ...
随机推荐
- 九度oj 题目1160:放苹果
题目描述: 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. 输入: 第一行是测试数据的数目t(0 <= t ...
- 九度oj 题目1125:大整数的因子
题目描述: 已知正整数k满足2<=k<=9,现给出长度最大为30位的十进制非负整数c,求所有能整除c的k. 输入: 若干个非负整数c,c的位数<=30每行一个c,当c=-1时中止 ( ...
- 【Luogu】P3116会议时间(拓扑排序,DP)
题目链接 本题使用拓扑排序来规划DP顺序.设s[i][j]表示i步是否能走到j这个点,e[i][j]表示i步是否能走到j这个点——用第二条路径.因为要满足无后效性和正确性,只有第i个点已经全部更新完毕 ...
- VS2015 “GENERATERESOURCE”任务意外失败 解决方法
昨天把项目解决方案Copy到另外的机器上执行,遭遇了一场"任务意外失败",网上搜索一下,顺利解决了,在此记录一下. Visual Studio.net 工程更换机器编译时遇到”Ge ...
- ElasticSearch聚合入门(续)
主要理解聚合中的terms. 参考:http://www.cnblogs.com/xing901022/p/4947436.html Terms聚合 记录有多少F,多少M { "size&q ...
- *LOJ#2322. 「清华集训 2017」Hello world!
$n \leq 50000$的树,有点权$\leq 1e13$,$q \leq 400000$次操作,有两种操作:从$s$跳到$t$每次$k$步,不到$k$步直接跳到$t$,每次把经过的点取根号:同样 ...
- Redis数据结构之链表
Redis使用的链表是双向无环链表,链表节点可用于保存各种不同类型的值. 一.链表结构定义1. 链表节点结构定义: 2. 链表结构定义: 示例: 二.链表在Redis中的用途1. 作为列表键的底层实现 ...
- max file descriptors [4096] for elasticsearch proess is too low, increase to at least [65536]
修改文件 /etc/security/limits.conf 加入以下两行: sonar hard nofile 65536 sonar soft nofile 65536 #备注:sonar这里是 ...
- easyui分页时,总页数出错
错误出现 MyBatis用easyui写后台分页代码时,出现翻页后显示总页数错误 代码如下 可能原因在于后台mappers.xml里的sql语句错误 <select id="getPr ...
- 设计模式之装饰(Decorator)模式
设计模式之装饰(Decorator)模式 (一)什么是装饰(Decorator)模式 装饰模式,又称为包装模式,它以对客户端透明的方式扩张对象的功能,是继承关系的替代方案之一. 装饰模式可以在不使用创 ...