1. 實(shí)現(xiàn)效果

GIF錄屏文件太卡有點(diǎn)卡，實(shí)際是很絲滑的

文章來源地址http://www.zghlxwxcb.cn/news/detail-806448.html

2. 編寫一個(gè)下雪效果組件 VabSnow.vue

1. 在 src 下新建 components 文件，創(chuàng)建VabSnow.vue組件文件

<template>
  <div class="content" :style="styleObj">
    <div v-for="(item, index) in 200" :key="index" class="snow"></div>
  </div>
</template>

<script>
  export default {
    name: 'VabSnow',
    props: {
      styleObj: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {}
    },
    created() {},
    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    filter: drop-shadow(0 0 10px white);
  }

  @function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));

    @return $random_range;
  }

  .snow {
    $total: 200;
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;

    @for $i from 1 through $total {
      $random-x: random(1000000) * 0.0001vw;
      $random-offset: random_range(-100000, 100000) * 0.0001vw;
      $random-x-end: $random-x + $random-offset;
      $random-x-end-yoyo: $random-x + ($random-offset / 2);
      $random-yoyo-time: random_range(30000, 80000) / 100000;
      $random-yoyo-y: $random-yoyo-time * 100vh;
      $random-scale: random(10000) * 0.0001;
      $fall-duration: random_range(10, 30) * 1s;
      $fall-delay: random(30) * -1s;

      &:nth-child(#{$i}) {
        opacity: random(10000) * 0.0001;
        transform: translate($random-x, -10px) scale($random-scale);
        animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
      }

      @keyframes fall-#{$i} {
        #{percentage($random-yoyo-time)} {
          transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
        }

        to {
          transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
        }
      }
    }
  }
</style>

3. 頁(yè)面使用

<template>
  <div class="home">
    <div class="body">
      <VabSnow />
    </div>
  </div>
</template>

<script>
  import VabSnow from '@/components/VabSnow' //引入組件
  export default {
    name: 'Demo',
    components: {
      VabSnow,
    },
  }
</script>

<style scoped lang="scss">
  .home {
    .body {
      width: 890px;
      height: 500px;
      border: #030303 solid 10px;
      box-sizing: border-box;
      box-sizing: border-box;
    }
  }
</style>

4. 注意點(diǎn)

1. 沒啥注意的，主要是scss的變量操作及css動(dòng)畫 ??

到了這里，關(guān)于011：vue結(jié)合css動(dòng)畫animation實(shí)現(xiàn)下雪效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！