html5粒子效果背景

所属分类:其他,UI-动画效果,背景

 52229  448  查看评论 (92)
html5粒子效果背景 ie兼容10

更新时间:2017/6/24 下午3:42:02

更新说明:修改代码,让插件能够在特定div作为背景运行


CanvasParticles

html5 canvas 实现网页背景粒子效果

1.引入js文件

<script type="text/javascript" src="canvas-particle.js"></script>

2.配置

配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置

在你的js文件中加上如下配置

window.onload = function(){
    //配置
    var config = {
        vx: 4,//点x轴速度,正为右,负为左
        vy:  4,//点y轴速度
        height: 2,//点高宽,其实为正方形,所以不宜太大
        width: 2,
        count: 100,//点个数
        color: "121, 162, 185",//点颜色
        stroke: "130,255,255",//线条颜色
        dist: 6000,//点吸附距离
        e_dist: 20000,//鼠标吸附加速距离
        max_conn: 10//点到点最大连接数
    }
    //调用
    CanvasParticle(config);
}


相关插件-动画效果,背景

html5 SVG绘图动画

html5 SVG绘图动画制作页面加载loading绘图动画效果
  动画效果
 6838  83

3D云 (酷!)

3D云在云端!
  动画效果
 24598  593

粒子效果插件

粒子效果插件用作背景还是很炫酷的,可以在js中改变点和线的颜色,动画速度等
  动画效果
 21638  194

12款常用动画图标

12款常用动画图标
  动画效果
 3697  69

讨论这个项目(92)回答他人问题或分享插件使用方法奖励jQ币

    人生就该如此 ┽ 0
    2017/11/5 23:00:29
    怎么改不了行内样式呀   它的层级是-1  我还想改个定位属性
        予天以星丨予地以花0
        2017/11/15 16:56:47

        在插件里面调

    回复
    妃茵裴修 0
    2017/9/28 11:02:16

    说句不专业的,我能玩一年,全部聚集简直完美感爆棚

    回复
    颤抖的搓鱼子 0
    2017/9/27 11:50:07

    怎样将方块写成圆球。圆球的大小随机啊?求大神

    回复
    佩玖 0
    2017/9/4 17:28:46
    大白菜 0
    2017/8/31 21:57:25

    为什么总会有点卡卡的感觉,有没有什么方法可以优化一下

    回复
    a?? 骑上蒲公英?去兜风 0
    2017/8/27 23:24:52
    Amitabha 0
    2017/8/1 14:48:05

    这个 不是 全屏 怎么设置

        Ape1
        2017/8/8 14:57:58
        html,body,#mydiv,canvas{
            width:100% !importanrt;    
              height:100% !important;
        }
        X战警0
        2017/9/1 11:08:27

        这个插件感觉不是很流畅,有什么方法可以优化一下吗

        有的人??一辈子0
        2017/10/15 15:30:16
        鼠标焦点会被位移 这个方法!
        有的人??一辈子0
        2017/10/15 15:34:13
        抱歉  直接复制你的代码未加检查  现在发现你的!是中文的,改为英文即可
    回复
    Amitabha 0
    2017/8/1 14:45:00
    这个编码格式是什么请问 回复
    0
    2017/6/30 12:05:03
    使用时在https的域名下回报错  请求的http地址的文件 , 有遇到过类似情况的吗 怎么解决 回复
    昨夜丶 0
    2017/5/23 17:44:20
取消回复