效果图：
我的项目地址： https://codepen.io/jianxiujiu…
HTML的构造如下，创立10个雪花元素。
其实三四个元素也能够。元素越多雪花越多，雪花的速度不一样，会显得更有层次感。
<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>
</body>一朵雪花
首先，咱们先写一朵雪花，并设为相对定位。
.snow {
position: absolute;
color: #fff;
&:after{
content: "❄";
}
}这样咱们就失去一朵雪花了。那么怎么生成很多的雪花呢？咱们能够用text-shadow这个属性，给雪花设置一个暗影。
.snow {
position: absolute;
color: #fff;
&:after {
text-shadow: 10px 10px #fff;
content: "❄";
}
}
那么给一朵雪花生成3个暗影，就写3个shadow值就能够了。
text-shadow: 10px 10px #fff, 5px 25px #fff, 22px 5px #fff;
多重雪花
当咱们心愿雪花能有更更更多的暗影，然而手动写太累人了也不迷信，所以咱们须要用到SASS的for循环，并联合random()随机函数去帮咱们随机生成多重暗影。
暗影的色彩能够设置为不同的透明度，能够让雪花看起来有层次感。
@function boxShadow ($n) {
$value: #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
@for $i from 1 through $n{
$value: #{$value} , #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);
}
@return $value;
}
.snow {
position: absolute;
color: #fff;
&:after{
text-shadow: boxShadow(150);
content: "❄";
}
}此时咱们一朵雪花的多重暗影就实现了。然而一朵雪花的动画就只动一遍就隐没了，并不是咱们想要的成果。所以咱们须要多增加几朵雪花，让它们不同工夫不同地位落下。
雪花飘落
@for $i from 1 through 10 {
.snow:nth-child(#{$i}) {
left: #{random(30)}vw;
font-size: #{(random(15) + 12)}px; // 雪花大小随机
color: rgba(255, 255, 255, random()); // 雪花透明度随机
animation: falldown #{random(5) + 85}s #{$i * -3}s infinite both; // 雪花降落的工夫随机，区间为86-90s
&:after {
content: "❄";
text-shadow: boxShadow(random(150));
}
}
}
@keyframes falldown {
0% {
transform: translate3d(0, -2000px, 0);
}
100%{
transform: translate3d(0, 2000px, 0);
}
}
发表回复