评论：html5粒子效果背景  [查看原文]

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

 160903  1251  116
当前第3页 / 共4页
    正能量 ?已认证??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

        我知道啦

        萱草忘忧0
        2017/5/18 14:56:38

        有什么方法能让它整个body都显示呢?

    回复
    Les Choristes0
    2017/3/8 10:59:01

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

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

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

        glm1969010
        2017/6/21 22:15:12

        果然是笨蛋多。。。

    回复
    Les Choristes0
    2017/3/8 10:50:56
    怎么设置点的颜色，在哪里设置的点的大小啊，还有我想把点的颜色设置成不一样的颜色，应该怎么改啊
        locoti1
        2017/6/24 15:18:47

        这里可以配置小球颜色和大小的，直接改后面的数值就可以了：

        //配置
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 //点到点最大连接数
}
    回复
    三年。0
    2017/2/28 23:28:00

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

    回复
    X0
    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
    wx31245580
    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
        没看懂啥意思啊。
    回复
    holymuch0
    2016/12/30 11:12:00
    怎么设置兼容的问题 在谷歌上有效果 其他浏览器上没有效果
        One丶0
        2017/2/15 10:47:51

        ie8以下估计实现不来

    回复
    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
        2017/4/10 11:15:18

        弱弱的问，哪里注释掉了？

        locoti0
        2017/6/24 14:23:02

        代码12行：var body = getElementByTag("body")[0];如果是这样就是取body作为背景的。

        也可以改为你自己想要的div。

    回复
    破壁人。0
    2016/11/4 16:11:55

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

取消回复