网页 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就是方 ...
随机推荐
- sqlserver查询表大小
IF OBJECT_ID('tempdb..#TB_TEMP_SPACE') IS NOT NULL DROP TABLE #TB_TEMP_SPACE GO CREATE TABLE #TB_TEM ...
- OkHttpUtil
package jp.co.gunmabank.util import android.os.Handlerimport android.os.Looperimport com.google.gson ...
- (绝对有用)iOS获取UUID,并使用keychain存储
原文链接 http://blog.sina.com.cn/s/blog_5971cdd00102vqgy.html UDID被弃用,使用UUID来作为设备的唯一标识.获取到UUID后,如果用NSUse ...
- Educational Codeforces Round 13——D. Iterated Linear Function(矩阵快速幂或普通快速幂水题)
D. Iterated Linear Function time limit per test 1 second memory limit per test 256 megabytes input ...
- 【SPOJ220】Relevant Phrases of Annihilation(后缀数组,二分)
题意: n<=10,len<=1e4 思路: #include<cstdio> #include<cstring> #include<string> # ...
- SSH: Transferred 0 file(s) 解决
Jenkins搭建过程中,使用 Publish Over SSH 插件.发生 SSH: Transferred 0 file(s). 百度.google了几个小时,终于找到答案,特此记录. 配置如下: ...
- Wannafly练习赛14
B(倍增) 题意: 分析: 先可以用two point预处理出以每个位置为起点的连续段<=k的下一个终点 然后对于每个询问,倍增跳就行了 时间复杂度O(nlogn) C(扫描线处理区间询问) ...
- php 笔记 汇总 学习
php命令行:通过命令行进入到当前要被执行的php文件路径,然后输入php环境可执行路径(后面包含php.exe),然后输入要被执行的php文件,比如runData.php即可. php框架:yaf. ...
- 关于克隆gitlab项目的一些 问题列表
1. gitLab项目clone过后, 运行ng serve出错: 解决方式: npm install -g node-gyp npm install --global --production wi ...
- PythonCookbook读书笔记
第一章 数据结构和算法 1.1 将序列分解为单独的变量 适用于元组.列表.字符串等.只要是可迭代的对象,都可以执行分解操作.唯一的要求是变量的总数和结构要与序列相同. 1.2 从任意长度的可迭代对象中 ...