当前位置:Gxlcms > html代码 > 在Google搜索Letitsnow的效果是怎么实现的?

在Google搜索Letitsnow的效果是怎么实现的?

时间:2021-07-01 10:21:17 帮助过:29人阅读

搜索页面 google.com.hk/search?

回复内容:

雪花是一个个 ❄ ❆ ❅ 符号,通过 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:没搞清楚怎么实现整屏雾气效果的,抛块砖头先。 这个效果我去年过圣诞节的时候做过 原理一楼已经讲过了 我就直接来个现成的实现把

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

schillmania.com/project let it snow