css雪花动画

效果图：

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);
  }
}

css雪花动画

一朵雪花

多重雪花

雪花飘落

剑锈酒残

引用和评论

live Sass 如何只编译当前文件

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

CSS 现在终于支持高度 auto 过渡动画了