html5粒子效果背景

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

 31401  270  查看评论 (67)
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);
}


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

消失在宇宙星空中的404页面

宇宙星空404页面
  动画效果
 10169  72

图片切换圆点特效

多种圆点切换特效
  动画效果
 10210  95

css3 3D翻拍效果

纯CSS打造的3D翻转效果
  动画效果
 7556  58

好看的翻页切换效果插件-BOOKLET

Booklet 为我们提供了一种漂亮的切换两个div的翻页效果。
  动画效果
 14614  13

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

    _7ng 0
    2017/4/17 11:41:50

    6666666666666,大神真多

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

    怎么改变背景颜色呢?

    回复
    清冷丶 0
    2017/4/11 0:21:37

    iOS里显示不正常

    回复
    正能量 ?已认证?? 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 里没有粒子效果怎么弄

        布列瑟农的女孩0
        2017/4/10 11:23:42
        当body的高度高于屏幕高度时,如何让整个body都能显示整个效果呢?
        布列瑟农的女孩0
        2017/4/10 11:39:27

        我知道啦

    回复
    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

        好的,谢了大哥。

        EastWu✨0
        2017/4/13 16:46:05
        没看懂啥意思啊。
    回复
取消回复