我们可以先看看效果
点这里 雪花
其实总的代码都不到 100 行，代码很少，因此 css 样式 和 js 代码我都放在一个 HTML 文件里面了
<body>
<div id="xh"></div>
</body>
html 的代码就只有一行
body {
background-color: black;
}
#xh {
position: relative;
}
.xue {
position: absolute;
display: inline-block;
/* opacity: .7; */
outline: none;
border: none;
animation: xuehua 5s infinite linear;
}
.xue:hover {
cursor: pointer;
animation-play-state: paused;
opacity: 1;
}
@keyframes xuehua{
from{
opacity: 1;
transform: translate(0, 0) rotate(0deg);
}
to{
opacity: 0;
transform: translate(0, 700px) rotateZ(720deg) rotateY(720deg) scale(1.5);
}
}
HTML 中唯一的 div#xh 给它设为 相对定位 relative ，便于它的子元素雪花定位。.xue 这个类设置为 绝对定位 absolute，便于改变它的 top 值，这个就不用多讲了吧。最主要的是 xuehua 这个动画，刚开始它的透明度设置为 1，慢慢地过渡到 0 ，位置也是从初始位置慢慢地往下移动，rotate 表示变换，边下落边变换。
<script type="text/javascript">
var xh = document.getElementById("xh");
/// 屏幕宽度
var dWidth = document.body.scrollWidth;
var dHeight = window.innerHeight;
var setXH = setInterval(function(){production();}, 100);
xh.style.height = dHeight;
function production()
{
var t1 = document.createElement("div");
/// left 和 top 最大值
/// left 减掉 100 是为了不产生横行的滑动条
var t1Left = Math.floor(Math.random() * dWidth) - 100;
var t1Top = Math.floor(Math.random() * 10);
t1.style.left = t1Left + "px";
t1.style.top = t1Top + "px";
t1.style.display = "inline-block";
t1.innerText = "❉";
t1.style.color = "white";
t1.classList.add("xue");
/// 将生成的雪花加入到 div 下面去
xh.appendChild(t1);
setInterval(function(){
t1.remove();
}, 5000);
}
</script>
在这里我大概的思路是这样的
1. 获取到一个容器（也就是HTML中的唯一一个div），保存到 xh 变量中
2. 获取屏幕的宽度（用于让雪花随机从不同的位置下落）
3. 设置一个计时器（用于产生雪花），我这里是每 100 毫秒产生一个 雪花
4. production 这个函数主要是产生雪花，里面的各种设置雪花的参数我就不一一介绍了。里面我用到了随机函数 random()，其作用就是让雪花下落的位置不同。然后参数设置好的雪花加入到div下面去（appendChild）
5. 最后我又设置了一个计时器，作用是每过 5000 毫秒（也就是 5s）就让移除一个雪花
雪花飘落的大致实现过程就是这样啦，要是哪位大佬有什么指导可以直接留言哦，很感谢你们提出的意见呢。大家有什么创意也可以留言哦，这也是提升的一种方法呢
哪个朋友想要源码可以留下邮箱，我直接发给你哦
最后祝大家身体健康~~~~
个人博客 http://www.sharekong.xyz 欢迎访问