网页 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就是方 ...
随机推荐
- element-ul InputNumber 空白
if(this.days == undefined){ this.$nextTick(function(){ this.days = 1; }); }
- iOS中的过滤器和正则表达式(NSPredicate,NSRegularExpression)
参考链接:http://www.cocoachina.com/industry/20140321/8024.html NSPredicate Cocoa提供了一个NSPredicate类,它用来指定过 ...
- PC端有什么好用的倍速播放的软件?
倍速播放的目的是让自己可以以更快的速度去看视频, 加快获取信息的效率 potplay吧,和KMP是一个作者.加速播放快捷键是c,减速时x,z恢复正常.下载官网 Global Potplayer
- cf615D Multipliers
Ayrat has number n, represented as it's prime factorization pi of size m, i.e. n = p1·p2·...·pm. Ayr ...
- 济南学习 Day 5 T2 am
車(Rook) [题目描述] 众所周知,車是中国象棋最厉害的棋子之一,他能吃到同一行或者同一列的其他棋子.車显然不能和車在一打起来,于是rly有借来了许多许多車在棋盘上摆了起来...... 他想知道, ...
- oracle 连接数据库以及查看当前用户、当前数据库实例
sql>show user;查看当前用户 sql>show parameter instance_name;查看当前数据库实例 例如: sqlplus登录:用sys用户登录(密码是1234 ...
- Mac 快速修改 hosts 文件
sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /etc/hosts
- iOS 设置RGB色的宏
转自:http://lizhuang.iteye.com/blog/1931768 //RGB Color macro #define UIColorFromRGB(rgbValue) [UICol ...
- openSUSE Leap 15.0 初始配置
添加源: # 禁用原有软件源 sudo zypper mr -da # 添加阿里镜像源 sudo zypper ar -fc https://mirrors.aliyun.com/opensuse/d ...
- Codeforces 667C Reberland Linguistics【DFS】
一道卡题意的题. 题目链接: http://codeforces.com/problemset/problem/667/C 题意: 一个串可以看成一个长度大于4的根,加上其后面的若干个相邻(in a ...