前端特效——复杂下雪，雪花纷飞（纯css)

效果：

原理：

因为是用的纯css，所以为了实现很多个雪花，我们就需要创建200个div（数量适量多即可）

然后先设置雪花div的共同属性：雪花的背景图片是雪花，给初始大小width: 10px;height: 10px;然后绝对定位到左上角。（左上角无实际意义，总之就先把雪花放到窗口顶部，然后你能先看得到）

因为雪花有大有小，所以用到了缩放 transform: scale(x)，我取的是1-3的随机数: random(3)

然后雪花需要移动起来：transform: translate(x,y)

因为雪花移动x轴的幅度不会很大，就是不要搞成从左0移动到右100vw，我们要控制雪花x轴的飘动差在10vw之间，所以 random(20) - 10 得出 -10 ~10

但是各个雪花之间初始所在的位置也是不一样的，如果一样，那大家不都是从一个点出发了吗。。所以我们需要设置雪花在X轴的初始位置：random(100)vw

然后就是加动画：从x轴某点移动到x轴某点（飘动差在10vw之间），然后从我们肉眼看不见的地方(-5vh) 落到地上 100vh

因为是200个不一样的雪花（大小，速度），各自飘动的时间也是不一样的，所以也要给随机数，但是又不能让某个或某些雪花存在1s就下完的情况，所以也要设置一个最低值 8s

最后，为了我们打开网页的时候，能提前看到雪花在飘落了，所以用到了延时 -Xs，表示动画提前开始了 X秒，同理，为了雪花纷飞的效果，我们不能让所有雪花都一起提前X秒，而是一个随机数。

理解了以上原理，你就可以手敲代码了，但是200个div的样式，然后还要想随机数，累死你

我用了CSS预处理器之sass

首先VSCode安装 Easy Sass的插件

然后在css文件夹创建复杂下雪.scss（注意：后缀是scss)

然后随便写点css样式，保存，就会自动生成同名字的css文件

在这里我们用到循环，用到随机数函数

循环：

@for $i from 1 through 200 {// 第i个雪花div.snow:nth-child(#{$i}) {}
}

随机数函数：

#{random(20) - 10}
#{random(3)
#{8 + random(20)}
-#{random(10)}

懂了上面语法后就可以直接写了

复杂下雪.scss：

.snow {position: absolute;width: 10px;height: 10px;background-image: url("../imgs/snowitem.png");background-size: cover;
}@keyframes move1{0%{// top: 0;// left: var(--left-ini);transform: translate(var(--left-ini),-5vh) scale(var(--size));}100%{// top: 100vh;// left: var(--left-end);transform: translate(var(--left-end),100vh);}
}@for $i from 1 through 200 {.snow:nth-child(#{$i}) {--left-ini: #{random(20) - 10}vw;--left-end: #{random(20) - 10}vw;--size: #{random(3)};// top: -5vh; // 不用top的原因，就是为了不使初始状态时，空间的某块行区域是空白的，不好看，直接用y位移就可以根据时间的随机性，让空间的同时刻每一行都能含有雪花left: #{random(100)}vw; // 从原来的位置左右移动一点点距离，如果直接使用left当位移点，移动的跨幅太大了，不好看animation: move1 #{8 + random(20)}s linear -#{random(10)}s infinite; // 用了延时，就是为了能有一运行代码就能提前有雪花出现在页面上}
}

复杂下雪.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>简单下雪</title><link rel="stylesheet" href="./css/复杂下雪.css" /><style>* {margin: 0;padding: 0;}body {background: rgb(41, 43, 41);height: 100vh;overflow: hidden;}/* .snow {position: absolute;width: 10px;height: 10px;background-image: url("imgs/snowitem.png");background-size: cover;}.snow:nth-child(1) {top: -100px;left: 300px;transform: scale(3);animation: move1 22s linear -8s infinite;}@keyframes move1{30.11%{top: 20vh;left: -100px;}100%{top: 100vh;left: 500px;}} */</style>
</head><body><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div>
</body></html>