html 出现粒子线条,鼠标移动会以鼠标为中心吸附的特效之canvas-nest.js插件
我在网上看到一个很炫酷,很有趣的特效,网页上会有很多移动的粒子和线条,鼠标经过时会以鼠标为中心吸附过来,如果时间够久,会形成一个类似震动的、带辐条的车轮子的东西。
网上搜了一下,源码是github里面的canvas-nest.js插件
github地址:https://github.com/hustcc/canvas-nest.js
使用也很简单,html上引入插件js就行了,代码如下:
<script type="text/javascript" color="255,0,255" pointColor="255,0,255" opacity='0.7' zIndex="-2" count="100" src="dist/canvas-nest.js"></script>
官方给的配置说明
Configuration
color: color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
pointColor: color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: the opacity of line (0~1), default: 0.5.
count: the number of lines, default: 99.
zIndex: z-index property of the background, default: -1.
经我试验,大概是这样的:
color:线条颜色,默认是(0,0,0),格式是(R,G,B)
pointColor:粒子颜色,这个应该是线条连接的点的颜色,默认是(0,0,0),格式是(R,G,B)
opacity:透明度(0-1),默认0.5
count:线段的数量,默认0.5,设置的过多的时候页面打开会变慢,我设置10000,打开要好几秒,页面上的线条直接变成一坨了,也不会动了,O(∩_∩)O哈哈~
zIndex:Z-index参数,默认-1
done!
html 出现粒子线条,鼠标移动会以鼠标为中心吸附的特效之canvas-nest.js插件的更多相关文章
- c#全局鼠标事件以及鼠标事件模拟
最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...
- 模拟在table中移动鼠标,高亮显示鼠标所在行
在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...
- WPF,强制捕获鼠标事件,鼠标移出控件外依然可以执行强制捕获的鼠标事件
在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...
- 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有! 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...
- 用VBS控制鼠标(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击)
Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) « bbPress积分 ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas粒子线条效果
在正式开始之前,先上个效果图看看: 很酷炫有木有??? 那么如何实现这个效果呢? 首先,我做这个特效的基本步骤是这样的: 1.将若干个粒子随机分布在画布(canvas)上,并且给他们一个初始速度 2. ...
- [Unity菜鸟] Unity鼠标双击,鼠标函数整理(未完)
1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...
- 鼠标事件之鼠标滑过事件MOUSEOVER
来源地址:http://www.g2room.com/jquery/index.php?p=example%2Fevent%2Fmouseover.html&n=%E9%BC%A0%E6%A0 ...
随机推荐
- ES6标准入门读书笔记
第一章 基础 1.let和const命令 (1).let用于声明变量,所声明的变量只在当前代码块有效 特点:不存在变量提升 所以在变量声明之前就使用会报错 暂时性死区 只 ...
- [git]入门-创建版本库
转载整理自:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256 ...
- 使用shell安装lnmp
1.简介 使用shell脚本安装lnmp,纯粹是偷懒,平时安装一些东西都写成脚本了,方便以后在其他机器安装的时候不用再去查找文档. PHP版本5.6.6 MYSQL版本5.6.26 NGINX版本1. ...
- C++面试笔记(1)
1. C和C++的区别 C++面向对象的三大特性 面向对象的三个基本特征:封装.继承.多态 1.封装:把客观事物封装成抽象的类,类进行信息隐藏 关键字 |当前类 |包内 |子孙类| 包外 --|--| ...
- fdisk语法
Linux下的fdisk功能是极其强大的,用它可以划分出最复杂的分区,下面简要介绍一下它的用法: 对于IDE硬盘,每块盘有一个设备名:对应于主板的四个IDE接口,设备名依次为:/dev/hda,/de ...
- 删除单链表节点,时间复杂度为O(1)
一个编程练习,删除单链表一个节点,且时间复杂度控制在O(1)内. 1.核心操作代码如下: struct ListNode { int m_data; ListNode *m_pNext; }; voi ...
- QT自定义控件系列(二) --- Loading加载动画控件
本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...
- UTC,BJT时间换算-java
题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果小时小于10,则没有千 ...
- webpack 代码分割一点事
webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是c ...
- 转发: 探秘Java中的String、StringBuilder以及StringBuffer
原文地址 探秘Java中String.StringBuilder以及StringBuffer 相信String这个类是Java中使用得最频繁的类之一,并且又是各大公司面试喜欢问到的地方,今天就来和大家 ...