当前位置：首页 > VUE

下雪特效vue实现

2026-01-16 17:58:07VUE

下雪特效的 Vue 实现方法

使用 CSS 动画和 Vue 动态渲染

在 Vue 中可以通过动态生成雪花的 DOM 元素，结合 CSS 动画实现下雪效果。创建一个 Vue 组件，随机生成雪花的位置、大小和下落速度。

<template>
  <div class="snow-container">
    <div 
      v-for="(snow, index) in snowflakes" 
      :key="index" 
      class="snowflake" 
      :style="{
        left: snow.left + 'px',
        width: snow.size + 'px',
        height: snow.size + 'px',
        animationDuration: snow.duration + 's'
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      snowflakes: [],
      snowflakeCount: 50
    }
  },
  mounted() {
    this.createSnowflakes()
  },
  methods: {
    createSnowflakes() {
      for (let i = 0; i < this.snowflakeCount; i++) {
        this.snowflakes.push({
          left: Math.random() * window.innerWidth,
          size: Math.random() * 10 + 5,
          duration: Math.random() * 5 + 3
        })
      }
    }
  }
}
</script>

<style>
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    transform: translateY(calc(100vh + 10px)) rotate(360deg);
  }
}
</style>

使用 Canvas 实现高性能下雪效果

对于更复杂的场景或需要更高性能的情况，可以使用 Canvas 来绘制雪花。这种方法减少了 DOM 操作，适合大量雪花的情况。

<template>
  <canvas ref="snowCanvas" class="snow-canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.snowCanvas
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    const ctx = canvas.getContext('2d')
    const snowflakes = []
    const snowflakeCount = 100

    for (let i = 0; i < snowflakeCount; i++) {
      snowflakes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 4 + 1,
        speed: Math.random() * 3 + 1,
        opacity: Math.random() * 0.5 + 0.5
      })
    }

    function drawSnowflakes() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      snowflakes.forEach(flake => {
        ctx.beginPath()
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`
        ctx.fill()

        flake.y += flake.speed
        if (flake.y > canvas.height) {
          flake.y = 0
          flake.x = Math.random() * canvas.width
        }
      })

      requestAnimationFrame(drawSnowflakes)
    }

    drawSnowflakes()

    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    })
  }
}
</script>

<style>
.snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
</style>

使用第三方库 vue-snowf

如果需要快速实现且不想从头开发，可以使用现成的 Vue 组件库。vue-snowf 是一个专门为 Vue 设计的雪花效果组件。

安装：

npm install vue-snowf

使用：

<template>
  <vue-snowf></vue-snowf>
</template>

<script>
import VueSnowf from 'vue-snowf'

export default {
  components: {
    VueSnowf
  }
}
</script>