saber 酱的抱枕

Fly me to the moon

01/9
2015
学习

网站雪花飘落效果一例

saber 撰写 2条回复 1,550次查看

刚刚找到并且使用的一个效果。严格来说飘落的并不是雪花，只是白色的光团。使用起来很简单，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>snow Examples</title>
</head>
<body style="background: #000;">.
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://saber.love/f/snow.js"></script>	
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div>
</body>
</html>

这个js貌似没有提供自定义参数，有时产生的大光团太大了，算是一个缺点吧。有时候光团会有随着移动产生变大变小的效果，与鼠标的移动也有互动效果，产生了3D感，不过感觉还是可以改进（反正我是站着说话不腰疼=，=）。

相关文章：

bilibili上使用的一个下雪效果
从139邮箱扒下来飘雪效果
研究SuperSlide的记录
网页评分工具demo
JavaScript网页下雪、雪花特效
一个樱花飞舞的jq特效
js做的元素不间断来回移动的效果
简单的仿一下商务通效果

网站雪花飘落效果一例