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!

  • 相关阅读:
    判断php变量是否定义,是否为空
    HTTP Client 编写
    推荐《冒号课堂——编程范式与OOP思想》
    一些免费的HTML编辑器
    如何判断mysql中数据表中两个列之间的相同记录和不同记录
    PostgreSQL 8.4, SQL Server 2008, MySQL 5.1比较
    JDBC纵览
    使用jdbc连接sql数据库
    关于PHP中变量的判定
    如何判断数据库中是否存在一个数据表
  • 原文地址:https://www.cnblogs.com/zqifa/p/js-canvas-nest.html
Copyright © 2011-2022 走看看