zoukankan      html  css  js  c++  java
  • 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!

  • 相关阅读:
    zookeeper 简介
    缓存雪崩 缓存穿透
    SpringCloud实战2-Ribbon客户端负载均衡
    SpringCloud实战1-Eureka
    JVM笔记9-Class类文件结构
    JVM笔记8-虚拟机性能监控与故障处理工具
    JVM笔记7-内存分配与回收策略
    SpringAOP-JDK 动态代理和 CGLIB 代理
    MySQL多数据源笔记5-ShardingJDBC实战
    MySQL多数据源笔记4-Mycat中间件实战
  • 原文地址:https://www.cnblogs.com/zqifa/p/js-canvas-nest.html
Copyright © 2011-2022 走看看