html5粒子效果背景

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

 37348  313  查看评论 (74)
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);
}


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

jquery车站数据显示牌效果插件Flapper

Flapper是jQuery插件的一个复制split-flap(或“Solari”),最常见的应用地方是在火车站和机场,以及70年代爸爸的闹钟上。 使用时,只要将Flapper关联到到网页上的任何输入界面。每当输入变化的事件触发,Flapper将更新显示
  动画效果
 7858  4

单元素实现的 CSS 加载进度提示效果

单元素实现的 CSS 加载进度提示效果
  动画效果
 10855  65

像纸一样展开的效果

html5 css3实现像纸一样展开的效果
  动画效果
 8246  68

纯CSS3实现的手绘黑白按钮特效

纯CSS3实现的手绘黑白按钮特效好看实用
  动画效果
 5670  36

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

    昨夜丶 0
    2017/5/23 17:44:20
    _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

        我知道啦

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

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

    回复
    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就可以了

        glm1969010
        2017/6/21 22:15:12

        果然是笨蛋多。。。

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