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

搜索页面 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的p(层级位置高于原有dom)
2.不停地向该p中添加绝对定位的雪花符号（所有的符号都在不停变动位置）。
3.在上面的容器之上，添加canvas层，并使用canvas的特殊css属性pointer-events，藉以达到鼠标穿透事件发生后，令canvas层下面的元素可以使用的目的。

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

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

http://www.schillmania.com/projects/snowstorm/ <!doctype html><head><title>let it snow</title>
<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,
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});
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]=
[a,b];return false}};
</script>
</head>
<body bgcolor="#000000" id="gsr">
<p id="snfloader">
<script id="snfloader_script">(function(){var s=document.createElement('script');s.src='snowyfog.9.js';s.async=true;s.addEventListener('load',function(){var app = new goog.egg.snowyfog.Snowyfog();app.init();},false);document.getElementById('snfloader').appendChild(s);})();</script>
</p>

<p>
<p id="cnt">
<p class="mw"><p id="bfoot"></p>
<script type="text/javascript">(new Image()).src="snow.gif";</script>
<noscript>
<img src="snow.gif" height=1 width=1 alt=""></noscript>
</p>
</p>
</p>
</body>

snowyfog.9.js 在

https://gist.github.com/1493708