在 Google 搜索 Let it snow 的效果是怎么实现的？

搜索页面 http://www.google.com.hk/search?sourceid=chrome&ie=UTF-8&q=let+it+snow

回复内容：

雪花是一个个 ❄ ❆ ❅ 符号，通过 JavaScript 不段地改变其父级元素的位置，从而控制它们随机摆动、落下。雪花的大小、颜色由随机生成的，在一定范围内的 font-size 和 color 属性来控制。

雪花的数目应该是固定的（200 个），也就是说，当雪花掉到地上后，会从天空上重新飘下来。

结冰的效果是通过在一个覆盖全屏幕的 canvas 上绘制霜状图形的方式实现的。霜状图形的颜色是透明的，比如底层浅蓝色的 rgba 值就是（240, 246, 246, 0.08）。

程序会检测鼠标事件，当鼠标按下时，会将鼠标坐标周围一块面积内的图形清空，来达到除霜的效果。

点击 Defrost 将会把 canvas 移除，从而去掉了霜层。

思路很简单，关键是 JavaScript 动画的优化。 1.在keyword == let+it+snow时，向常规dom中添加一个大小覆盖viewport的div(层级位置高于原有dom)
2.不停地向该div中添加绝对定位的雪花符号（所有的符号都在不停变动位置）。
3.在上面的容器之上，添加canvas层，并使用canvas的特殊css属性pointer-events，藉以达到鼠标穿透事件发生后，令canvas层下面的元素可以使用的目的。

P.S:没搞清楚怎么实现整屏雾气效果的，抛块砖头先。 这个效果我去年过圣诞节的时候做过 原理一楼已经讲过了 我就直接来个现成的实现把

这个脚本简单好用 易于实现 如果想看原理 就读一读 源代码把

http://www.schillmania.com/projects/snowstorm/
<script>window.google={kEI:"T_fuTq3MD4iA2wXqqrSoDw",getEI:function(a){var b;while(a&&!(a.getAttribute&&(b=a.getAttribute("eid"))))a=a.parentNode;return b||google.kEI},https:function(){return window.location.protocol=="https:"},kEXPI:"18167,30316,31215,33492,33526,33527,33902,34864,35213,35300,35357",kCSI:{e:"18167,30316,31215,33492,33526,33527,33902,34864,35213,35300,35357",ei:"T_fuTq3MD4iA2wXqqrSoDw"},authuser:0, <br>ml:function(){},pageState:"#",kHL:"en",time:function(){return(new Date).getTime()},log:function(a,b,c,e){var d=new Image,g=google,h=g.lc,f=g.li,j="";d.onerror=(d.onload=(d.onabort=function(){delete h[f]}));h[f]=d;if(!c&&b.search("&ei=")==-1)j="&ei="+google.getEI(e);var i=c||"/gen_204?atyp=i&ct="+a+"&cad="+b+j+"&zx="+google.time(),k=/^http:/i;if(k.test(i)&&google.https()){google.ml(new Error("GLMM"),false,{src:i}); <br>delete h[f];return}d.src=i;g.li=f+1},lc:[],li:0,j:{en:0,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!="#",bv:20,cf:"osb",pm:"",pl:[],mc:0,sc:0.5,u:"d937558e"},Toolbelt:{},y:{},x:function(a,b){google.y[a.id]= <br>[a,b];return false}}; <br></script>









snowyfog.9.js 在

https://gist.github.com/1493708