看到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. Laxcus大数据管理系统2.0(5)- 第二章 数据组织

    第二章 数据组织 在数据的组织结构设计上,Laxcus严格遵循数据和数据描述分离的原则,这个理念与关系数据库完全一致.在此基础上,为了保证大规模数据存取和计算的需要,我们设计了大量新的数据处理技术.同 ...

  2. cri-o pod 创建源码分析

    1. server/sandbox.go // RunPodSandbox creates and runs a pod-level sandbox func (s *Server) RunPodSa ...

  3. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  4. jquery 实现邮箱输入自动提示功能:(一)

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  5. Javascript 中的闭包和引用

    Javascript 中一个最重要的特性就是闭包的使用.因为闭包的使用,当前作用域总可以访问外部的作用域.因为Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的. ...

  6. UVA 11235 Frequent Values ---RMQ

    大白书上的例题,具体讲解见大白书,最好用用一个Log数组直接求k,这样就是纯O(1)了 #include <iostream> #include <cstdio> #inclu ...

  7. BZOJ 2186 [Sdoi2008]沙拉公主的困惑 【逆元】

    题意:求中互质的数的个数,其中. 分析:因为,所以,我们很容易知道如下结论    对于两个正整数和,如果是的倍数,那么中与互素的数的个数为      本结论是很好证明的,因为中与互素的个数为,又知道, ...

  8. 手机中点击链接或button按钮出现黄色边框的解决办法

    a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-rin ...

  9. Python-装饰器详解

    初学python,装饰器是什么玩意儿? 1:装饰器是函数,只不过该函数可以具有特殊的含义,装饰器用来装饰函数或类,使用装饰器可以在函数执行前和执行后添加相应操作. 2:至少两层函数 方式一: 理解方式 ...

  10. 序列化在Netty中的使用

    Java序列化的缺点 1.无法跨语言 对于Java序列化后的字节数组,别的语言无法进行反序列化 2.序列化后的码流过大 3.序列化性能低 使用JDK自带的序列化进行对象的传输 被传输的,实现了序列化接 ...