1、概述：
以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机大小的彩色雪花实现。
2、实现功能：
（1）雪花随机出现并随机消失；
（2）雪花出现时大小随机；
（3）雪花颜色逐渐变淡并消失；
（4）雪花消失后删除其对象，减轻系统负担。
3、完整实现代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<script src="雪花.js"></script>
</body>
</html>JS:
function flake() {
//先写静态再写动态
//一朵雪花在屏幕内随即摆放
var f = document.createElement("img");
f.src = "flake.png";
//随机问题用随机函数
//先获取屏幕的宽高，在用随机函数得到一个随机的X Y值
var width = document.documentElement.clientWidth;
var heigh = document.documentElement.clientHeight;
//获取屏幕随机坐标
var left = Math.random() * width;
var top = Math.random() * heigh;
// alert(width)
f.style.position = "absolute";
f.style.left = left + "px";
f.style.top = top + "px";
//随即缩放
f.style.transform = "scale(" + Math.random() / 2 + ")"
//将这个标签插入到body中
document.body.appendChild(f);
//在JS中可以使用方法里面的方法
function down() {
top++;
left++;
f.style.left = left + "px";
f.style.top = top + "px";
if (top > heigh) {
top = -100;
}
if (left > width) {
left = -100;
}
}
setInterval(down, 20)
}
//下落
function down() {
f.style.top++
}
setInterval(down, 1000)
for (var i = 0; i < 50; i++) {
flake()
}
4、实现效果
