~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~
看到coding的主界面有雪花, 原来,哇, 真漂亮, 一看源代码, 哦了个去, angular写的, 压力好大, 分析分析分析分析....
然后就写成jQ插件的样子给大家用了。
在线预览的页面是: http://1.keepu.sinaapp.com/snow/snow.html
Github的代码地址是: http://sqqihao.github.io/nice-Snowing ;
上图了
后面把angular拿掉了,直接引用jQuery就好了,其实不用jQuery也行的哇, 兼容没弄哇;
HTML的代码就是canvas就好了,如下
<canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"></canvas> <canvas class="snow-canvas" speed="3" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366" height="667"></canvas> <canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="snow.png" width="1366" height="667"></canvas>
所有的配置都是在canvas节点上面的, 看节点属性的名字就知道是神马意思了,
比如:
添加image这个属性是图片地址, 让雪花自定义成喜欢的样子;
size表示的是图片的大小
count表示图片的个数..等等; 直接戳实例地址:打开demo;
~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~的更多相关文章
- CAEmitterLayer实现雪花效果
CAEmitterLayer 简介 在iOS5.0中,Apple引入了CAEmitterLayer层,CAEmitterLayer是一个高性能的粒子效果引擎,被用来创建实时粒子动画,如:烟雾,火,雨等 ...
- CodePen 作品秀:Canvas 粒子效果文本动画
作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
- canvas雪花
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Html页面雪花效果的实现
简单介绍 昨天修改了一下博客所用的模板,冬天来了,给自己的博客加点雪花,感觉更有意境. 百度找到了非常多的结果,最终还是选用了cfs.snow.js,很赞压缩之后只有1kb左右,而且不会影响页面使用, ...
- 6 cocos2dx粒子效果,类图关系,系统原生粒子和自己定义粒子效果,粒子编译器软件,爆炸粒子效果,烟花效果,火焰效果,流星效果,漩涡粒子效果,雪花效果,烟雾效果,太阳效果,下雨效果
1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...
- HTML5 Canvas时间效果
Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...
随机推荐
- Verilog (一) assignment, register and net
Verilog 区分大小写, 且所有关键字都是小写 1 register = storage keyword reg; default x; variable that can hold value ...
- JAVA版Kafka代码及配置解释
伟大的程序员版权所有,转载请注明:http://www.lenggirl.com/bigdata/java-kafka.html.html 一.JAVA代码 kafka是吞吐量巨大的一个消息系统,它是 ...
- HDU 4409 Family Name List --乱搞、LCA
题意: 给出一些名字,名字间有父子关系,有三种操作: 1.按祖先到后代,兄弟间按字典序由小到大排序,然后输出 2.求某个节点的兄弟节点有多少个,包括自己(注意,根节点的兄弟节点是1) 3.求节点a和b ...
- Topcoder SRM 618 Div2 --900
题意:给定两个NxN的棋盘,每个棋盘都有一个‘车’的摆放状态,问进行若干次交换,能否使棋盘1变为棋盘2. 交换规则:每次选两个‘车’,坐标分别为(r1,c1),(r2,c2),如果r1<r2并且 ...
- Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现) .
今天学习了Spinner组件,使用Spinner相当于从下拉列表中选择项目,下面演示一下Spinner的使用(分别使用ArrayAdapter和自定义Adapter实现) (一):使用ArrayAda ...
- 在springmvc中使用hibernate-validate
在springmvc.xml中加入 <!-- 国际化配置 --> <bean id="localeResolver" class="org.spring ...
- iOS单例模式(Singleton)写法简析
单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...
- yield(C# 参考)
yield(C# 参考) 在语句中使用 yield 关键字,表示在该关键字所在的方法.运算符或 get 访问器是迭代器. 通过使用 yield 定义迭代器,可在实现自定义集合类型的 IEnumer ...
- IBatis.Net学习笔记七--日志处理
IBatis.Net中提供了方便的日志处理,可以输出sql语句等调试信息. 常用的有两种:1.输出到控制台: <configSections> <sectionGroup ...
- 从客户端中检测到有潜在危险的request.form值
今天被这个问题卡住了,在用到CKEDITOR的时候,老是报错显示输入字符存在潜在危险,之后百度了一下,试了这两种方法: 解决方案一: 在.aspx文件头中加入这句: <%@ Page ...