html5粒子效果背景

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

 21821  176  查看评论 (46)
html5粒子效果背景 ie兼容10

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+CSS3音量调节旋转按钮

可以拨动让物体旋转,很不错
  动画效果
 7559  56

简易的摩天轮效果

摩天轮效果纯css写的,大家可参考下原理。
  动画效果
 5923  26

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 6278  20

jquery颜色动画插件jquery.colorAnimations.js

jquery颜色动画插件jquery.colorAnimations.jsjquery
  动画效果
 9774  7

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

    holymuch0
    2016/12/30 11:12:00
    怎么设置兼容的问题 在谷歌上有效果 其他浏览器上没有效果 回复
    holymuch0
    2016/12/29 10:12:41

    请问我的怎么没有效果呢 

        holymuch0
        2016/12/30 10:12:41

        要在js里修改什么内容吗

    回复
    (_L.nメ°0
    2016/12/26 15:12:35

    发现有点小抖动,改了一下鼠标进入画布时xy加速后面的除于数..变大就稳定一点了

    回复
    l ì_0
    2016/12/18 14:12:44

    我吧100个全收集起来了

        Panny0
        2017/1/9 12:01:13

        我已经收集好几次了

    回复
    Abnormal0
    2016/12/15 15:12:34
    很炫酷,膜拜!
        木子日月0
        2016/12/15 17:12:09
        跪了
    回复
    凡夫俗子0
    2016/11/20 19:11:43
    你好,请问一下怎么设置在网页表面实现这个浮动的效果,新手不太理解,能否举个例子参透一下,谢谢
        (_L.nメ°0
        2016/12/26 15:12:11

        https://isux.tencent.com/canvas-particle-animation.html

    回复
    不言盛景。0
    2016/11/17 16:11:15
    so nice!但是有一个问题,就是当body的高度高于屏幕高度时,怎么让整个body都能显示整个效果?
        不言盛景。0
        2016/11/17 16:11:31
        刚看了代码,原来注释了...
    回复
    破壁人。0
    2016/11/4 16:11:55
    someone.sth0
    2016/11/2 18:11:41
    您好!鼠标进入区域上面的点 怎么只能在一定范围内 拖动 页面底部 没效果 宽高限制 只找到了点的限制  拖动距离 未找到 求指教 Q :864031711 回复
    locoti0
    2016/10/20 11:10:28
    1:看到获取的这个body没有,把它换成你要设置的di2:将canvas大小重新设置一下3:测试OK
        稻草人0
        2016/10/27 22:10:45
        你好。在chrome很成功, 但在手机上访问,发现背景被顶到了所有网页的最下面(一幅空的粒子效果背景,上面是网页内容   )请问这是什么问题?
        稻草人0
        2016/10/27 22:10:26
        用chrome上的手机模拟也OK,但是实际用就不行了
    回复
取消回复
    PROMULGATOR

    locoti

    湖北省武汉市