<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

         body{

                 background: #000000;

                 position: relative;

             }

             #demo{

                 width: 922px;

                 height: 550px;

                 background:url(img/merry-christmas.jpg);

                 margin: auto;

             }

             #demo2{

                 width: 100%;

                 height: 100%;

             }

         </style>

     </head>

     <body>

         <div id="demo"></div>

         <div id="demo2"></div>

         <script type="text/javascript" src="Particleground.js-master/production/particleground.js"></script>

         <script type="text/javascript" src="Particleground.js-master/production/snow.js"></script>

         <script type="text/javascript" src="Particleground.js-master/production/particle.js"></script>

         <script type="text/javascript">

             new Particleground.snow( '#demo' );

             new Particleground.particle( '#demo2', {

                 // range等于0，表示不连线

                 range: 0,

                 max: 20,

                 num: 18,

                 speed: 3

             });

         </script>

     </body>

 </html>

粒子动画Particleground.js的更多相关文章

  1. js canvas 粒子动画 电子表

     前言 从我接触canvas的第一天就觉得canvas很有趣,想搞点事情,这几天终于忍不住了,于是他来了. 先看效果                       这里我做了四个大家有兴趣可以看完文章, ...

  2. 一些网站后台模板源码分析 Particleground.js 验证码

    转: https://blog.csdn.net/bcbobo21cn/article/details/51271750 1 灰色简洁企业后台管理模板 效果: 看下项目结构: 它使用了moderniz ...

  3. canvas学习之粒子动画

    项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...

  4. 带着canvas去流浪系列之九 粒子动画【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  5. 带着canvas去流浪系列之九 粒子动画

    [摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...

  6. 【带着canvas去流浪（9）】粒子动画

    目录 一. 粒子特效 二. 开发中遇到的问题 2.1 卡顿 2.2 轨迹 2.3 复位 2.4 防护层 2.5 二维向量类 三. 实现讲解 3.1 粒子类的update方法 3.2 粒子群的绘制 3. ...

  7. vue-particles粒子动画插件的使用和爬坑出现垂直滚动条

    1下载==>cnpm install vue-particles --save-dev 2引入 注册-->main.js//插件 import VueParticles from 'vue ...

  8. Objective-c粒子动画

    前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...

  9. CSS3动画与JS动画的优缺点？

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

随机推荐

  1. java持久层框架mybatis如何防止sql注入

    看到一篇很好的文章:http://www.jfox.info/ava-persistence-framework-mybatis-how-to-prevent-sql-injection sql注入大 ...

  2. Linux下如何删除Oracle

    一. 停止Oracle数据库服务 shutdown immediate 二. 停止监听服务 lsnrctl stop 三. 用dbca卸载数据库实例 四. 删除相关文件  -->> 如果只 ...

  3. OCP-052 & 053部分答案解析

    OCP~052 . GRANT ANY OBJECT PRIVILEGE(授予任何对象权限):允许被授权人将其本身不拥有的对象的对象权限授予他人,但不能授予自己. . ENABLE VALIDATE ...

  4. java变量的加载顺序

    学习编程思想 package com.test.java.classs; /** * Created by Administrator on 2015/12/7. * 在类的内部,变量定义的顺序决定了 ...

  5. 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常

    起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图 然后本人做实验找了半天原因终于是找到 ...

  6. 模拟 --- hdu 12878 : Fun With Fractions

    Fun With Fractions Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit ...

  7. ADB pm 命令

    usage: pm list packages [-f] [-d] [-e] [-s] [-3] [-i] [-u] [--user USER_TER] pm list permission-grou ...

  8. javascript学习笔记1-document.write

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  9. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  10. android释放内存的一个办法

    step 1:定义一个监听接口 public static interface OnLowMemoryListener { void onLowMemoryReceived(); } /* 何问起 h ...