<!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. ini_set("display_errors","On");和error_reporting(E_ALL);

    在用php做网站开发的时候 , 为防止用户看到错误信息,而出现的不友好界面.故一般性会在php.ini里设置:display_errors = Off;不过在开发的时候,我们有时候需要打开错误信息.这 ...

  2. Java基础-接口中国特色社会主义的体制中有这样的现象：地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。 要求如下： （1）该应用程序中有一个“党中央”接口：CentralPartyCommittee，该接口中 有个“坚持党的领导”方法：void partyLeader() （2）该应用程序中有一个“国务院”抽象类：StateCouncil，

    36．中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产.请编写一个java应用程序描述上述的体制现象. 要求如下: (1)该应用程序中有一个“党中央”接口 ...

  3. java之内部类详解

    序言 有位小同学要我写一篇这个的总结,我说那好吧,那就动手写总结一下这个内部类的知识,感觉这个在面试中也会经常遇到,内部类.反射.集合.IO流.异常.多线程.泛型这些重要的基础知识大家都比较容易记不住 ...

  4. iReport 开发和运行所用版本不一致导致设置字体大小不起作用

    问题:开发环境使用 Win10 + iReport 5.6 ,运行环境使用 Win10 + iReport 5.2 ,设置字体的大小不起作用. 解决方法:开发环境和运行环境一致,都使用 iReport ...

  5. 利用CSS3 clip-path裁剪各种图形。

    'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...

  6. 【VS技巧】根据XML自动生成类型

    .NET 4.5对应的VS版本(不要问我哪个版本)中新增了一个功能,严重实用,可以根据XML文档生成新类型.这个功能在VS的[编辑]>[选择性粘贴]菜单中.怎么玩?不急,咱们实际操作一下. 以网 ...

  7. Android 自定义View及其在布局文件中的使用示例(三):结合Android 4.4.2_r1源码分析onMeasure过程

    转载请注明出处 http://www.cnblogs.com/crashmaker/p/3549365.html From crash_coder linguowu linguowu0622@gami ...

  8. 转载-centos网络配置(手动设置，自动获取)的2种方法

    转载地址:http://blog.51yip.com/linux/1120.html 重新启动网络配置 # service network restart 或 # /etc/init.d/networ ...

  9. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  10. postgres中几个复杂的sql语句

    postgres中几个复杂的sql语句 需求一 需要获取一个问题列表,这个问题列表的排序方式是分为两个部分,第一部分是一个已有的数组[0,579489,579482,579453,561983,561 ...