我在网上看到一个很炫酷,很有趣的特效,网页上会有很多移动的粒子和线条,鼠标经过时会以鼠标为中心吸附过来,如果时间够久,会形成一个类似震动的、带辐条的车轮子的东西。

网上搜了一下,源码是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插件的更多相关文章

  1. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

  2. 模拟在table中移动鼠标,高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  3. WPF,强制捕获鼠标事件,鼠标移出控件外依然可以执行强制捕获的鼠标事件

    在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...

  4. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

  5. 用VBS控制鼠标(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击)

    Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) « bbPress积分 ...

  6. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. canvas粒子线条效果

    在正式开始之前,先上个效果图看看: 很酷炫有木有??? 那么如何实现这个效果呢? 首先,我做这个特效的基本步骤是这样的: 1.将若干个粒子随机分布在画布(canvas)上,并且给他们一个初始速度 2. ...

  8. [Unity菜鸟] Unity鼠标双击,鼠标函数整理(未完)

    1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

  9. 鼠标事件之鼠标滑过事件MOUSEOVER

    来源地址:http://www.g2room.com/jquery/index.php?p=example%2Fevent%2Fmouseover.html&n=%E9%BC%A0%E6%A0 ...

随机推荐

  1. (2018 Multi-University Training Contest 3)Problem L. Visual Cube

      //题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6330//题目大意:按照一定格式画出一个 a×b×c 的长方体.  #include <b ...

  2. Hacker一月间

    我给自己的新赛季制定了一个计划,就是研究Kali,一个大集成开源软件系统,不过是用来做Hacker的. 以前其实想玩玩这个,但负责信息安全,总是担心安全漏洞这里安全漏洞哪儿,其实自己很害怕有安全漏洞, ...

  3. Python基础学习---位运算符

    <<   左移,每移动1位,相当于乘以2      例如:32<<2    等价于:32*4 ==128 >>   右移,每移动1位,相当于除以2      例如: ...

  4. 基于springboot构建dubbo的入门demo

    之前记录了构建dubbo入门demo所需的环境以及基于普通maven项目构建dubbo的入门案例,今天记录在这些的基础上基于springboot来构建dubbo的入门demo:众所周知,springb ...

  5. dubbo入门学习笔记之入门demo(基于普通maven项目)

    注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...

  6. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  7. Python02(Linux命令)

    Trainning-day01回顾 1.who :查看登录到系统的用户信息 2.pwd :查看当前所在路径 3.ls :查看当前目录的内容 ls -l ls -a ls -la / ls -l -a ...

  8. Visual Studio项目属性的生产平台,如何改为X64?

    如图,我把平台改为x64,可是按打叉,退出后,再进入项目属性,还是 x86,没变. 解决方法: 选择 Setup1项目, 选择"属性" ->选择 "配置管理器&qu ...

  9. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  10. flex 布局 实现电商页面商品展示floor

    有了上一篇,对flex的初次使用,心里痒痒的试着,实现了电商首页,商品展示的floor,先看下效果: 要实现首先是对组件构件的拆解,拆解如下: 页面布局如下: <div class=" ...