<template>
  <div class="snow-container">
    <div v-for="i in 30" :key="i" class="flake"></div>
  </div>
</template>

<style lang="scss" scoped>
  .snow-container {
    position: absolute;
    top: 0;
    left: -3cpx;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .flake {
    position: absolute;
    width: 3cpx;
    height: 3cpx;
    background: white;
    border-radius: 50%;
    opacity: 0.7;
    animation: fall linear infinite;
  }

  @keyframes fall {
    0% {
      transform: translateY(-10px);
      opacity: 1;
    }
    100% {
      transform: translateY(200px);
      opacity: 0;
    }
  }

  /* 随机分布 */
  .flake:nth-child(1) {
    left: 10%;
    animation-duration: 2s;
    top: -10cpx;
  }
  .flake:nth-child(2) {
    left: 20%;
    animation-duration: 3s;
    top: -15cpx;
  }
  .flake:nth-child(3) {
    left: 30%;
    animation-duration: 2.5s;
    top: -5cpx;
  }
  .flake:nth-child(4) {
    left: 40%;
    animation-duration: 3.5s;
    top: -10cpx;
  }
  .flake:nth-child(5) {
    left: 50%;
    animation-duration: 2.8s;
    top: -12cpx;
  }
  .flake:nth-child(6) {
    left: 60%;
    animation-duration: 3.2s;
    top: -8cpx;
  }
  .flake:nth-child(7) {
    left: 70%;
    animation-duration: 2.7s;
    top: -10cpx;
  }
  .flake:nth-child(8) {
    left: 80%;
    animation-duration: 3.3s;
    top: -15cpx;
  }
  .flake:nth-child(9) {
    left: 90%;
    animation-duration: 2.2s;
    top: -5cpx;
  }
  .flake:nth-child(10) {
    left: 5%;
    animation-duration: 3s;
    top: -10cpx;
  }
</style>
