效果图：
我的项目地址： 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); }}