• 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!

  • 相关阅读:
    基于HTML5技术的电力3D监控应用(三)
    XCODE 出现 The operation couldn't be completed.(LaunchServicesError error 0.)错误修复
    iOS本地动态验证码生成-b
    裁剪出环形图片
    UITableView实现格瓦拉飞天投票模块-b
    高仿猫眼电影选座(选票)模块-b
    java和php实现RSA加密互通-b
    iOS10 权限崩溃问题-b
    iOS百度地图路径规划和POI检索详细总结-b
    iOS 的 Gif 渲染
  • 原文地址:https://www.cnblogs.com/zqifa/p/js-canvas-nest.html
Copyright © 2020-2023  润新知