网页 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就是方 ...
随机推荐
- ICMP TYPE CODE
TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x 3 0 Network Unreachable——网络不可达 ...
- BZOJ 1974 [Sdoi2010]auction 代码拍卖会 ——动态规划
把每一位上不递减的数拆成1+11+11111+11111+..... 然后就可以把巨大的N从复杂度中消掉,因为随着长度的增加1...111%p出现了循环节. 然后就是从n个数中选出几个使他们结果为0( ...
- VS链接错误: LNIK1123
问题:编译一个VS工程程序,出现连接错误:"LNK1123: 转换到 COFF 期间失败: 文件无效或损坏" 原因分析:连接器LNK是通过调用cvtres.exe完成文件向coff ...
- Hadoop 3.1.0 在 Ubuntu 16.04 上的安装过程
安装过程主要参考官方文档: http://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/SingleCluster. ...
- kubernetes---CentOS7安装kubernetes1.11.2图文完整版
转载请注明出处:kubernetes-CentOS7安装kubernetes1.11.2图文完整版 架构规划 k8s至少需要一个master和一个node才能组成一个可用集群. 本章我们搭建一个mas ...
- Lucky and Good Months by Gregorian Calendar(poj 3393)
大致题意: 科普文一篇,文章80%都是无用信息,因为都是常识,但是又不得不看,因为有20%是常人不知道的历史常识. 定义: Goog month : 该月第一个工作日为星期一的月份 Luckly mo ...
- 团伙(codevs 2597)
题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友 ...
- Nova 组件详解
本节开始,我们将详细讲解 Nova 的各个子服务. 前面架构概览一节知道 Nova 有若干 nova-* 的子服务,下面我们将依次学习最重要的几个.今天先讨论 nova-api 和 nova-cond ...
- golang sort包 排序
[]float64: ls := sort.Float64Slice{ 1.1, 4.4, 5.5, 3.3, 2.2, } fmt.Println(ls) //[1.1 4.4 5.5 3.3 2. ...
- BZOJ 4810 [Ynoi2017]由乃的玉米田 (莫队 + bitset)
题目链接 BZOJ 4810 首先对询问离线, 莫队算法处理. 首先我们可以用bitset维护处当前区间中是否存在某个数. 对于询问1, 我们可以用 ((f >> q[i].x) &am ...