html5粒子效果背景

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

 46540  409  查看评论 (86)
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效果

HTML5制作逼真蝴蝶天空飞舞动画特效
  动画效果
 15453  299

jQuery模拟人打字插件typetype

TypeType是一个jQuery插件,模拟人的打字它可以结合jQuery的动画。
  动画效果
 21740  53

html5酷炫购物车结算动画特效

动画效果蛮好可以学习
  动画效果
 8546  44

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 12103  34

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

    佩玖 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

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

    回复
    Amitabha 0
    2017/8/1 14:45:00
    这个编码格式是什么请问 回复
    0
    2017/6/30 12:05:03
    使用时在https的域名下回报错  请求的http地址的文件 , 有遇到过类似情况的吗 怎么解决 回复
    昨夜丶 0
    2017/5/23 17:44:20
    _7ng 0
    2017/4/17 11:41:50

    6666666666666,大神真多

    回复
    ??白?某人、 0
    2017/4/13 10:33:46

    怎么改变背景颜色呢?

        Ape1
        2017/8/8 14:59:46
        body{background:red !important}
    回复
    清冷丶 0
    2017/4/11 0:21:37

    iOS里显示不正常

    回复
取消回复