粒子动画Particleground.js
<!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的更多相关文章
- js canvas 粒子动画 电子表
前言 从我接触canvas的第一天就觉得canvas很有趣,想搞点事情,这几天终于忍不住了,于是他来了. 先看效果 这里我做了四个大家有兴趣可以看完文章, ...
- 一些网站后台模板源码分析 Particleground.js 验证码
转: https://blog.csdn.net/bcbobo21cn/article/details/51271750 1 灰色简洁企业后台管理模板 效果: 看下项目结构: 它使用了moderniz ...
- canvas学习之粒子动画
项目地址:http://pan.baidu.com/s/1ccTptc 粒子动画意思就是把一个图片粒子画,然后使用粒子作出动画效果,主要两个问题:一个图片如何粒子化,这里面我们使用canvas的get ...
- 带着canvas去流浪系列之九 粒子动画【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 带着canvas去流浪系列之九 粒子动画
[摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...
- 【带着canvas去流浪（9）】粒子动画
目录 一. 粒子特效 二. 开发中遇到的问题 2.1 卡顿 2.2 轨迹 2.3 复位 2.4 防护层 2.5 二维向量类 三. 实现讲解 3.1 粒子类的update方法 3.2 粒子群的绘制 3. ...
- vue-particles粒子动画插件的使用和爬坑出现垂直滚动条
1下载==>cnpm install vue-particles --save-dev 2引入 注册-->main.js//插件 import VueParticles from 'vue ...
- Objective-c粒子动画
前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...
- CSS3动画与JS动画的优缺点？
JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...
随机推荐
- 按要求编写Java应用程序。 （1）创建一个叫做People的类： 属性：姓名、年龄、性别、身高 行为：说话、计算加法、改名 编写能为所有属性赋值的构造方法； （2）创建主类： 创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80； 让该对象调用成员方法： 说出“你好！” 计算23+45的值 将名字改为“李四”
package java1; public class People { public String name; public int age; public String sex; public S ...
- RESTORE DATABASE的standby选项
RESTORE DATABASE [db1] FROM DISK = N'E:\Backup\db2.bak' , MOVE N'db1_Data' TO N'D:\Data\db2.MDF', MO ...
- JAVA设计模式《二》
上一篇为大家介绍了一下设计模式中的责任链模式,本篇为大家介绍一下关于设计模式中的单例模式与模板方法模式.单例模式的作用在于,保证应用中某个实例有且只有一个,单例模式又被分为:饱汉模式与饿汉模式,两者的 ...
- 使用ab进行页面的压力测试
ab是apache自带的一个很好用的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab 参数说明及示例 我们可以模拟100个并发用户,对一个页面发送1000个请求 输入命令:ab - ...
- Unity3D 开发之shader教程(浅谈光照之漫反射diffuse)
在游戏开发过程中,光照应该是必不可少部分,当然,这是指大多数的稍微大型一些的3D游戏会需要,给模型或者山山水水加上光照,会看上去更加的真实,获得更好的体验.一个本身不发光物体显示什么颜色,在于本身反射 ...
- 扩展HT for Web之HTML5表格组件的Renderer和Editor
在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...
- HT for Web整合OpenLayers实现GIS地图应用
HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...
- Emit学习(4) - Dapper解析之数据对象映射(二)
承接着上一篇, 这一篇主要以堆栈的方式来演示一下, db数据转换到类中去的一个过程. 一.先看第一张图 程序在运行到176行(上一篇贴出的代码)的时候, 就会出现上图中的第一个栈. 那在此之前, Da ...
- js中的正则表达式使用
function myValid() { var errorMsg = ""; var res = true; //拿到要验证的值. var receiveName = $(&qu ...
- [DBW]js获取当前时间(昨天、今天、明天)
开发过程中某些前台页面的时间控件我们需要给默认当前时间,jquery可以轻松的帮我们实现,代码如下 1 //昨天的时间 2 var day1 = new Date(); 3 day1.setTime( ...