<!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. Liferay7 BPM门户开发之40: Form表单的Action到Render的数据传递

    在Form提交后的变量,很多情况是要展现在jsp页面中,这时Action到Render的变量传递就非常有用. 例如,您在数据库中添加了学生的详细信息. 为了实现这一需求,先创建Form表单(学生的细节 ...

  2. Hidden File For Mac

    显示所有隐藏文件的方法: terminal中输入: defaults write com.apple.finder AppleShowAllFiles -bool true 同理,再次隐藏就输入: d ...

  3. Design2：数据层次结构建模之二

    MSSql提供了一个新的数据类型 HierarchyID,用来处理层次结构的数据,这个数据类型是系统内置的CLR数据类型,不需要专门激活 SQL/CLR 功能即可使用.当需要表示各值之间的嵌套关系,并 ...

  4. 移动开发框架剖析(一) Hammer专业的手势控制

    一直在写jQuery的源码教程,都没时间研究别的框架了.Hammer是我项目御用的一个手势库,早期1.x版本的swipe事件的响应不灵敏的问题而改过源码,2.x就已经更正过来,而且源码的结构也整个翻新 ...

  5. OpenCASCADE Application Framework Data Framework Services

    OpenCASCADE Application Framework Data Framework Services eryar@163.com 一.概述Overview OpenCASCADE的数据框 ...

  6. struts2 OGNL表达式

    一.OGNL OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者调用对 ...

  7. 2014牡丹江网络赛ZOJPretty Poem（暴力枚举）

    /* 将给定的一个字符串分解成ABABA 或者 ABABCAB的形式! 思路:暴力枚举A, B, C串! */ 1 #include<iostream> #include<cstri ...

  8. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  9. JQuery实现仿sina新浪微博新鲜事滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Windows Azure Affinity Groups (3) 修改虚拟网络地缘组(Affinity Group)的配置

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内使用世纪互联运维的Azure China 在笔者之前的文章中,我们知道现在微软官方不建议使用Affinity ...