html5粒子效果背景

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

 158864  1249  查看评论 (115)
分享到微信朋友圈
X
html5粒子效果背景 ie兼容10
html5粒子效果背景在线演示教程

更新时间: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和CSS3卡片自动翻牌特效

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

炫酷css3登录界面

带CSS3动画特效的时尚登录界面UI设计
  动画效果
 89739  732

卷轴动画-html5+js完美兼容IE6+

卷轴动画-html5+js完美兼容IE6+
  动画效果
 49498  476

jQuery数据滚动

当页页滚动到一定位置时,数值自动增加动态效果
  动画效果
 45764  505

讨论这个项目(115)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    壹起航-建站部设计 0
    2020/5/6 17:25:29
    怎么修改粒子的圆角呢,想设置为圆形 回复
    ???青 汁┵ 0
    2020/1/10 15:22:01
    如何在vue-cli中使用?
    回复
    花落的声音 0
    2019/9/15 9:56:24
    如何才能把背景设置为特定div(并且给div设置颜色),放在div里就不显示,跪求大佬解答。。
    回复
    为你拼命 0
    2019/4/14 8:57:46
    我设置了局部显示,但鼠标离开区域后,回复不了初始状态,谁给帮帮分析下怎么弄 回复
    薄荷味的笑 1
    2018/12/24 16:44:08

    如果页面滚动的话,会出现一些视差,办法:

    body.onmousemove = function(e){
        var event = e || window.event;
        canvas.mouse = {
            x: event.offsetX,
            y: event.offsetY
        }
    }
    回复
    鱼 零? 0
    2018/12/13 19:06:03
    怎么把这个高度设置大一点
        西瓜0
        2018/12/13 21:08:29

        设置height:800px

        <div id="mydiv" style="height:800px;"></div>
    回复
    happy晴川 0
    2018/11/23 17:35:20
    如何让插件在特定div作为背景运行
        西瓜0
        2018/12/13 21:07:42
        在粒子背景上加一层css浮动层就行了。
    回复
    赵静静 0
    2018/11/19 18:05:45
    为什么我还是不能把特定div作为背景运行呢?大神求指教 回复
    祖传手机贴膜 0
    2018/11/3 15:36:59
    用发很方便,赞赞赞 回复
    终于白首 0
    2018/9/20 16:00:47
    如果需要给多个div各加一个这样的效果,该怎么弄 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复