下雪特效vue实现
下雪特效的 Vue 实现方法
使用 CSS 动画实现基础下雪效果
通过 CSS 的 @keyframes 动画和 transform 属性创建雪花飘落效果。在 Vue 的模板中添加多个雪花元素，每个雪花通过随机生成的样式实现不同的飘落路径和速度。
<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: `${Math.random() * 3 + 2}s`,
animationDelay: `${Math.random() * 5}s`,
opacity: Math.random(),
width: `${Math.random() * 10 + 5}px`,
height: `${Math.random() * 10 + 5}px`
}
});
}
}
}
};
</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%;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
</style>使用 Canvas 实现高性能下雪效果
对于更复杂的场景或大量雪花，Canvas 是更好的选择。通过 Vue 的 ref 获取 Canvas 元素，并在 mounted 钩子中绘制雪花。
<template>
<canvas ref="snowCanvas" class="snow-canvas"></canvas>
</template>
<script>
export default {
mounted() {
const canvas = this.$refs.snowCanvas;
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
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()
});
}
function drawSnowflakes() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
snowflakes.forEach(flake => {
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
ctx.globalAlpha = 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();
}
};
</script>
<style>
.snow-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
}
</style>使用第三方库实现高级效果
如果需要更丰富的效果，可以使用专门的动画库如 particles.js 或 vue-particles。
安装 vue-particles：
npm install vue-particles在 Vue 项目中注册并使用：
import VueParticles from 'vue-particles'
Vue.use(VueParticles)在模板中添加组件：
<template>
<div>
<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="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
/>
</div>
</template>响应式调整
对于 Canvas 方案，需要监听窗口大小变化并调整 Canvas 尺寸：
mounted() {
// ...初始化代码...
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
const canvas = this.$refs.snowCanvas;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
