看到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雪花效果, 漂亮到简直没天理啊~~的更多相关文章

  1. CAEmitterLayer实现雪花效果

    CAEmitterLayer 简介 在iOS5.0中,Apple引入了CAEmitterLayer层,CAEmitterLayer是一个高性能的粒子效果引擎,被用来创建实时粒子动画,如:烟雾,火,雨等 ...

  2. CodePen 作品秀:Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  3. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  4. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  5. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  6. canvas雪花

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Html页面雪花效果的实现

    简单介绍 昨天修改了一下博客所用的模板,冬天来了,给自己的博客加点雪花,感觉更有意境. 百度找到了非常多的结果,最终还是选用了cfs.snow.js,很赞压缩之后只有1kb左右,而且不会影响页面使用, ...

  8. 6 cocos2dx粒子效果,类图关系,系统原生粒子和自己定义粒子效果,粒子编译器软件,爆炸粒子效果,烟花效果,火焰效果,流星效果,漩涡粒子效果,雪花效果,烟雾效果,太阳效果,下雨效果

     1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...

  9. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

随机推荐

  1. UESTC 899 方老师和农场 --双连通分量的构造

    首先将原图中的连通分量缩点,一定可以将原图缩成一棵树的形式,然后统计这棵树的叶子节点个数,答案就是(leaf+1)/2.这里不再证明,可以画个图看一下. (简单说明一下,首先把两个最近公共祖先最远的两 ...

  2. JMeter学习(三)元件的作用域与执行顺序

    1.元件的作用域 JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...

  3. java 14 - 8 DateFormat

    A.有时候在网站注册账号时,会有日期选项,下面会有一个小型的日历可供选择.这个日期其实是个String类, 选择了日期之后,这个String类会通过程序,转换为Date类,再存入数据库中. B.反之, ...

  4. oracle用sqlplus创建新用户,不是plsql developer

    1.sqlplus /nolog 2.conn /as sysdba 3.alter user system identified by "123456"; 4.alter use ...

  5. C# 应用程序配置文件操作

    应用程序配置文件,对于asp.net是 web.config对于WINFORM程序是 App.Config(ExeName.exe.config). 配置文件,对于程序本身来说,就是基础和依据,其本质 ...

  6. Android动画原理分析

    最近在Android上做了一些动画效果,网上查了一些资料,有各种各样的使用方式,于是乘热打铁,想具体分析一下动画是如何实现的,Animation, Animator都有哪些区别等等. 首先说Anima ...

  7. Linux 进程通信(无名管道)

    无名管道 无名管道是半双工的,就是对于一个管道来讲,只能读,或者写. 无名管道只能在相关的,有共同祖先的进程间使用(即一般用户父子进程). 一个fork或者execve调用创建的子进程继承了父进程的文 ...

  8. yield(C# 参考)

    yield(C# 参考) 在语句中使用 yield 关键字,表示在该关键字所在的方法.运算符或 get 访问器是迭代器.   通过使用 yield 定义迭代器,可在实现自定义集合类型的 IEnumer ...

  9. pandas 修改 DataFrame 列名

    问题: 有一个DataFrame,列名为:['$a', '$b', '$c', '$d', '$e'] 现需要改为:['a', 'b', 'c', 'd', 'e'] 有何办法? import pan ...

  10. C#基础——谈谈.NET异步编程的演变史

    http://www.cnblogs.com/fzrain/p/3545810.html 前言 C#5.0最重要的改进,就是提供了更强大的异步编程.C#5.0仅增加两个新的关键字:async和awai ...