<!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. KnockoutJS 3.X API 第四章(14) 绑定语法细节

    data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...

  2. Java EE开发平台随手记1

    过完春节以来,一直在负责搭建公司的新Java EE开发平台,所谓新平台,其实并不是什么新技术,不过是将目前业界较为流行的框架整合在一起,做一些简单的封装和扩展,让开发人员更加易用. 和之前负责具体的项 ...

  3. IDEA开发多项目的示例

    前言:慢慢习惯用IDEA了,觉得用起来确实还不错,有VS的感觉,但是缺点就是每次启动慢,如果修改以后反应也需要好久,这方面做得不好.但是职能提示个人觉得要比Eclipse好太多.好了现在我用IDEA来 ...

  4. WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...

  5. Kruskal算法(一)之 C语言详解

    本章介绍克鲁斯卡尔算法.和以往一样,本文会先对克鲁斯卡尔算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 最小生成树 2. 克鲁斯卡尔算法介绍 3 ...

  6. Docker的学习--命令使用详解

    使用命令查看一下docker都有那些命令: docker -h 你将得到如下结果: A self-sufficient runtime for linux containers. Options: - ...

  7. HTML Inspector – 帮助你编写高质量的 HTML 代码

    HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...

  8. NodeJS实战：Express+Mongoose+ejs

    元宵还没到,先向所有朋友拜一个晚年~~~ 文章目录: 1.组件版本号 -- --node -- --express -- --Mongoose 2.初始化项目 firstblood -- --用 ex ...

  9. [java] 汇率换算器实现-插曲1-正则表达式(1)

    [java] 汇率换算器实现-插曲1-正则表达式(1) // */ // ]]> // */ // ]]>   [java] 汇率换算器实现-插曲1-正则表达式(1) Table of C ...

  10. asp.net中打印指定控件内容

    1.写一个PrintHelper类using System;using System.Data;using System.Configuration;using System.Web;using Sy ...