这是我个人非常喜欢的一个小特效，代码简洁，容易理解，特别备注每一条的含义，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雪花飘落</title>
<style>
.snow {
position: absolute;
top: 0;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
//定义飘落的元素,可以随意修改
var element = "<div class='snow'>❅<div>"
// 计时器开启飘落
setInterval(function () {
// 获取浏览器的宽度
var W = $(window).width();
// 获取浏览器的高度度
var H = $(window).height();
// 指定飘落元素的left
var e = Math.random() * W - 100;
// 指定飘落元素的随机透明度
var o1 = 0.3 + Math.random();
var o2 = 0.3 + Math.random();
// 指定飘落元素的随机大小
var f = 10 + Math.random() * 30;
// 指定飘落元素的小范围移动用于执行动画过程
var l = e - 100 + 200 * Math.random();
//指定飘落元素执行动画的随机时间
var k = 2000 + 5000 * Math.random();
//指定飘落元素的随机颜色
var c1 = Math.floor(Math.random() * 256);
var c2 = Math.floor(Math.random() * 256);
var c3 = Math.floor(Math.random() * 256);
$(element).clone().appendTo("body").css({
left: e + "px",
opacity: o1,
fontSize: f,
color: "rgb(" + c1 + "," + c2 + "," + c3 + ")"
}).animate({
top: H + "px",
left: l + "px",
opacity: o2,
}, k, "linear", function () { $(this).remove() })
}, 200)
})
</script>
</body>
</html>
浙公网安备 33010602011771号