下雪特效vue实现

使用 CSS 动画实现雪花效果

创建一个 Vue 组件，利用 CSS 动画生成随机下落的雪花。

模板部分

<template>
  <div class="snow-container">
    <div 
      v-for="(snow, index) in snowflakes" 
      :key="index" 
      class="snowflake" 
      :style="snow.style"
    ></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({
          style: {
            left: `${Math.random() * 100}%`,
            animationDuration: `${5 + Math.random() * 10}s`,
            opacity: Math.random(),
            width: `${5 + Math.random() * 10}px`,
            height: `${5 + Math.random() * 10}px`
          }
        });
      }
    }
  }
};
</script>

样式部分

<style scoped>
.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%;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}
</style>

使用 Canvas 实现更复杂效果

若需要更真实的雪花飘落效果，可使用 Canvas 绘制。

模板部分

<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 = Array(100).fill().map(() => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 5 + 1,
      speed: Math.random() * 2 + 1,
      wind: Math.random() * 0.5 - 0.25
    }));

    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      snowflakes.forEach(flake => {
        flake.y += flake.speed;
        flake.x += flake.wind;
        if (flake.y > canvas.height) flake.y = 0;
        if (flake.x > canvas.width) flake.x = 0;
        if (flake.x < 0) flake.x = canvas.width;

        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.fillStyle = "white";
        ctx.fill();
      });
      requestAnimationFrame(animate);
    }
    animate();
  }
};
</script>

样式部分

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

使用第三方库（如 vue-particles）

安装 vue-particles 快速实现粒子效果：

npm install vue-particles

注册组件

import VueParticles from "vue-particles";
Vue.use(VueParticles);

在模板中使用

<template>
  <vue-particles
    color="#FFFFFF"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#FFFFFF"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="2"
    :hoverEffect="false"
  />
</template>

以上方法可根据需求选择，CSS 动画适合轻量级效果，Canvas 提供更灵活控制，而第三方库能快速集成复杂特效。