html5粒子效果背景

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

 60056  504  查看评论 (93)
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);
}


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

jQuery超酷文字淡入淡出显示特效

文字淡入淡出显示特效
  动画效果
 3087  21

3D云 (酷!)

3D云在云端!
  动画效果
 27663  650

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果,一共有六种模式。
  动画效果
 7183  80

css3实现鲨鱼游动(酷)

css3实现鲨鱼游动,效果非常酷哦。
  动画效果
 12908  85

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

    绅士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
        抱歉  直接复制你的代码未加检查  现在发现你的!是中文的,改为英文即可
    回复
    Amitabha 0
    2017/8/1 14:45:00
    这个编码格式是什么请问 回复
    0
    2017/6/30 12:05:03
    使用时在https的域名下回报错  请求的http地址的文件 , 有遇到过类似情况的吗 怎么解决 回复
取消回复