html5粒子效果背景

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

 27680  232  查看评论 (58)
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);
}


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

以简单的方式创造有趣和疯狂的移动文本。

以简单的方式创造有趣和疯狂的移动文本。
  动画效果
 8027  25

弹框消失效果

弹框消失的各种效果,应该会有你需要的。
  动画效果
 3858  22

步骤填写表单

美观的填写表单界面
  动画效果
 12046  80

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 9046  91

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

    正能量 ?已认证?? 0
    2017/3/8 15:59:15
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Particles</title>
    	<style type="text/css">
        div{
        	height: 300px;
        }
    	</style>
    </head>
    <body>
    	<script type="text/javascript">
    		window.onload = function(){
    			var config = {
    				vx: 4,
    				vy:  4,
    				height: 2,
    				width: 2,
    				count: 100,
    				color: "121, 162, 185",
    				stroke: "100,200,180",
    				dist: 6000,
    				e_dist: 20000,
    				max_conn: 10
    			}
    			CanvasParticle(config);
    		}
    	</script>
    	<script type="text/javascript" src="canvas-particle.js"></script>
    	<div>
          666
    	</div>
    </body>
    </html>

    div 里没有粒子效果怎么弄

    回复
    Les Choristes 0
    2017/3/8 10:59:01

    color:"121,162,185"这几个数字代表什么意思,我一直都没有理解到,还有改成颜色的英文red就不会显示了,到底是怎么回事啊,哪位大神解释哈嘛,谢谢啦

        S.Y??0
        2017/3/10 15:11:03

        代表RGB,去PS里找你要的颜色的RGB就可以了

    回复
    Les Choristes 0
    2017/3/8 10:50:56
    怎么设置点的颜色,在哪里设置的点的大小啊,还有我想把点的颜色设置成不一样的颜色,应该怎么改啊 回复
    三年。 0
    2017/2/28 23:28:00

    您好,我想请问一下,怎么让粒子跟随鼠标滚动呢?

    回复
    X 0
    2017/2/17 13:00:39
    求大神,怎么把它作为指定div的背景?
        One丶0
        2017/2/21 17:00:37

        canvas{position:fixed; z-index:-1; top:0;}

    回复
    One丶 0
    2017/2/15 11:04:33
    wx3124558 0
    2017/1/28 23:03:49

    你好,我想请教一个问题哈,我jsp 的结构如下:

    <body>
    	<center>
    		<div class="context">
    			<!-- 登录、注册、注销 -->
    			<div class="heads">
    			</div>
    			
    			<!-- 登录弹窗 -->
    			<div id="login-dialog">
    			</div>
    			
    			<!-- 注册弹窗 -->
    			<div id="regist-dialog">
    			</div>
    
    			<!-- 导航栏 -->
    			<div class="nack">
    			</div>
    			
    			<div class="context1"></div>
    			<div class="foot"></div>
    			<div class="mask"></div>
    		</div>
    	</center>
    </body>

    请问怎么把特效应用到 context 层,我这里就是背景层,小白一个,对前端很懵逼= =

        西瓜0
        2017/1/30 12:10:17

        加到同级或上一层,css设置context浮动即可

        <style>
        	.context{ margin:0 auto; width:1000px; height:80px; border:1px solid #00F}
        </style>
        <body>
        	<script type="text/javascript">
        		window.onload = function() {
        			var config = {
        				vx: 4,
        				vy: 4,
        				height: 2,
        				width: 2,
        				count: 100,
        				color: "121, 162, 185",
        				stroke: "100,200,180",
        				dist: 6000,
        				e_dist: 20000,
        				max_conn: 10
        			}
        			CanvasParticle(config);
        		}
        	</script>
        	<script type="text/javascript" src="canvas-particle.js">
        	</script>
        	<center>
        		<div class="context">
        			....
        		</div>
        	</center>
        </body>
        wx31245580
        2017/1/31 23:31:00

        好的,谢了大哥。

    回复
    holymuch 0
    2016/12/30 11:12:00
    怎么设置兼容的问题 在谷歌上有效果 其他浏览器上没有效果
        One丶0
        2017/2/15 10:47:51

        ie8以下估计实现不来

    回复
    holymuch 0
    2016/12/29 10:12:41

    请问我的怎么没有效果呢 

        holymuch0
        2016/12/30 10:12:41

        要在js里修改什么内容吗

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

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

    回复
取消回复