如果实现第一个屏背景色渐变+落叶效果

Question

我给header设置了100vh，希望第一个屏幕背景色渐变。但是在header内放落叶特效却被挤在了下面，不知道怎么修改了
以下是效果图:

源代码:

<template>
  <div class="header">
    <div v-for="item of 500" :key="item" class="snowflake"></div>
    <div class="title">
      <div class="title__top">驶出孤岛</div>
      <div class="title__row">
        <div class="title__row__left">的</div>
        <div class="title__row__right">淘金者</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
* {
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(to top, rgb(255, 255, 255), #000);
  background: -webkit-linear-gradient(
    to top,
    rgb(255, 255, 255),
    #000
  ); /* Safari 5.1-6.0 */
  background: -o-linear-gradient(
    to top,
    rgb(255, 255, 255),
    #000
  ); /* Opera 11.1-12.0 */
  background: -moz-linear-gradient(
    to top,
    rgb(255, 255, 255),
    #000
  ); /* Firefox 3.6-15 */
  background: linear-gradient(to top, rgb(255, 255, 255), #000); /* 标准语法 */
  .title {
    width: 90%;
    height: 3.56rem;
    margin: 2.6rem 0 0 0;
    letter-spacing: 0.5rem;
    &__top {
      display: block;
      font-size: 1.496rem;
      font-family: 宋体;
      font-weight: bold;
      margin-left: 1rem;
    }
    &__row {
      display: flex;
      justify-content: flex-end;
      &__left {
        color: #f0f0f0;
        font-size: 1.2rem;
        font-family: 宋体;
        padding-right: 0.1rem;
        margin-top: 0.15rem;
      }
      &__right {
        color: #000;
        font-size: 1.6rem;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        padding-right: 0.5rem;
      }
    }
  }
}

.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: url(../../images/falling.gif) no-repeat; //雪花图片 也可以画圆
  background-size: 100% 100%;
  position: fixed;
  top: -10vh; //出事高度在屏幕外 效果更真实
  z-index: -10; //背景图层不遮挡上面元素
}

@keyframes fall {
  100% {
    transform: translate3d(var(--end), 100vh, 0);
  }
}

@for $i from 0 through 200 {
  .snowflake:nth-child(#{$i}) {
    //每个雪花的大小
    --size: #{random(6) * 0.1}vw;
    //雪花移动目标点
    --end: #{random(20) - 0}vw;
    //雪花初始位置
    left: #{random(150)}vw;
    //雪花从顶到底移动的动画 动画时间可以调整雪花速度
    animation: fall #{5 + random(8)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}
</style>

Answer 1

没问题啊，不过落叶生成了500个，但是样式中只设置了200的，其余300个白生成了，而且z-index设置为-10，被覆盖看不了。。

<div v-for="item of 500" :key="item" class="snowflake"></div>