<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>圣诞雪花</title>
  <style>
    body {
      background: #333;
    }
    .snow {
      position: absolute;
      top: 0;
      left: 0;
      width: 1920px;
      height: 802px;
    }
    .snow .sn {
      position: absolute;
      top: -100px;
      width: 100px;
      height: 15px;
      background: url(//img14.360buyimg.com/cms/jfs/t1/11013/3/1993/4721/5c106ed6Effef3f2b/46c3d0ba3132b5d9.png
      ) no-repeat;
      background-size: contain;
    }
    .snow .sn1 {
      left: 12vw;
      animation: fall 15s linear 3s infinite;
      height: 1vw;
    }
    .snow .sn2 {
      left: 22vw;
      animation: fall 17s linear 0s infinite;
    }
    .snow .sn3 {
      left: 32vw;
      animation: fall 15s linear 10s infinite;
      height: 1.5vw;
    }
    .snow .sn4 {
      left: 42vw;
      animation: fall 26s linear 1s infinite;
    }
    .snow .sn5 {
      left: 52vw;
      animation: fall 15s linear 0s infinite;
      height: 1.6vw;
    }
    .snow .sn6 {
      left: 62vw;
      animation: fall 31s linear 0.2s infinite;
      height: 1vw;
    }
    .snow .sn7 {
      left: 72vw;
      animation: fall 15s linear 7s infinite;
      height: 1.9vw;
    }
    .snow .sn8 {
      left: 82vw;
      animation: fall 21s linear 0.3s infinite;
      height: 2vw;
    }
    .snow .sn9 {
      left: 39vw;
      animation: fall 15s linear 5s infinite;
    }
    .snow .sn10 {
      left: 46vw;
      animation: fall 17s linear 0.4s infinite;
      height: 1.7vw;
    }
    .snow .sn11 {
      left: 77vw;
      animation: fall 19s linear 9s infinite;
      height: 1.6vw;
    }
    .snow .sn12 {
      left: 18vw;
      animation: fall 22s linear 2s infinite;
    }
    .snow .sn13 {
      left: 52vw;
      animation: fall 31s linear 12s infinite;
      height: 1vw;
    }
    .snow .sn14 {
      left: 62vw;
      animation: fall 15s linear 11s infinite;
    }
    .snow .sn15 {
      left: 92vw;
      animation: fall 21s linear 15s infinite;
      height: 1vw;
    }
    .snow .sn16 {
      left: 59vw;
      animation: fall 15s linear 6s infinite;
    }
    .snow .sn17 {
      left: 26vw;
      animation: fall 17s linear 9s infinite;
      height: 1vw;
    }
    .snow .sn18 {
      left: 87vw;
      animation: fall 19s linear 9s infinite;
      height: 1.2vw;
    }
    .snow .sn19 {
      left: 28vw;
      animation: fall 22s linear 8s infinite;
    }

    @keyframes fall {
      0% {
        top: 0;
        transform: rotate(0);
      }
      100% {
        top: 100vh;
        transform: rotate(600deg);
      }
    }
  </style>
</head>
<body>
<div class="snow">
  <span class="sn sn1"></span>
  <span class="sn sn2"></span>
  <span class="sn sn3"></span>
  <span class="sn sn4"></span>
  <span class="sn sn5"></span>
  <span class="sn sn6"></span>
  <span class="sn sn7"></span>
  <span class="sn sn8"></span>
  <span class="sn sn9"></span>
  <span class="sn sn10"></span>
  <span class="sn sn11"></span>
  <span class="sn sn12"></span>
  <span class="sn sn13"></span>
  <span class="sn sn14"></span>
  <span class="sn sn15"></span>
  <span class="sn sn16"></span>
  <span class="sn sn17"></span>
  <span class="sn sn18"></span>
  <span class="sn sn19"></span>
</div>
</body>
</html>