网页 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就是方 ...
随机推荐
- HLG 2025
确定大小 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 50(15 users) Total Accepted: 12(11 user ...
- 【Android】自定义Dialog
先上图 main.xml主界面文件 <?xml version="1.0" encoding="utf-8"?><LinearLayout x ...
- 关于JS中字符串赋值的问题
JS中不能直接 字符串不能 str[i] = 'x' 不能for循环 字符串length 然后赋值 应该 将字符串转换为数组 而且 字符x[i]=* 不是所有浏览器都兼容的 用 spl ...
- SPOJ LCS2 Longest Common Substring II ——后缀自动机
后缀自动机裸题 #include <cstdio> #include <cstring> #include <iostream> #include <algo ...
- 【Java工具】在代码头部加版权
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...
- 洛谷 [T21778] 过年
离线扫描线+查分+线段树 我们发现,这个题的询问都是离线的,所以我们尝试用离线扫描线的方法来处理 对于每一次操作,我们维护一个差分数组, 在询问的时候,我们用一根扫描线,从左往右扫,并用线段树维护,每 ...
- ElasticSearch API 之 GET
GET API是Elasticsearch中常用的操作,一般用于验证文档是否存在:或者执行CURD中的文档查询.与检索不同的是,GET查询是实时查询,可以实时查询到索引结果.而检索则是需要经过处理才能 ...
- 【BZOJ2002】弹飞绵羊(LCT)
题意:给定一棵树,要求维护以下操作: 1.删除连接(x,y)的边 2.将(x,y)之间连边 3.询问某点子树大小 对于100%的数据n<=200000,m<=100000 思路:第一道有加 ...
- angular中事件戳转日期的格式
本地化日期格式化: ({{ today | date:'medium' }})Nov 19, 2015 3:57:48 PM ({{ today | date:'short' }})11/19/15 ...
- flask-script插件
首先在启动Flask项目时,我们可以传不同的参数作为运行参数.但是我们只能在入口app.run()传参.这样十分的不方便.Flask-Script 是一个 Flask 扩展,为 Flask 程序添加了 ...