html5粒子效果背景

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

 71469  568  查看评论 (95)
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);
}


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

3D云 (酷!)

3D云在云端!
  动画效果
 30813  709

可以在网页上拖动的水晶球特效

可以在网页上拖动的水晶球特效
  动画效果
 14194  57

HTML5 Canvas粒子效果文字动画特效(酷!)

HTML5 Canvas粒子效果文字动画特效
  动画效果
 65972  670
  动画效果
 23424  144

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

    Sra12 0
    2018/5/21 0:46:43
    隐藏初始效果,只在鼠标经过时候出现,要怎么改代码,求教! 回复
    Perhaps 0
    2018/3/16 16:24:43
    感谢作者 插件用起来超级方便 ! 回复
    绅士v 0
    2017/12/20 12:07:37
    我把mydiv改成我指定的div,但还是显示全屏呀??? 回复
    人生就该如此 ┽ 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
        抱歉  直接复制你的代码未加检查  现在发现你的!是中文的,改为英文即可
    回复
取消回复