在 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/

snowyfog.9.js 在

https://gist.github.com/1493708