<template>
<div class="cake-rain-container">
<img v-for="cake in cakes" :src="cakeImg" :key="cake.id" class="cake-rain" :style="cake.style" />
</div>
</template>
<script>
export default {
data() {
return {
cakes: [],
cakeImg: require('../../assets/img/birtyActive.png') // 指定蛋糕图片的路径
};
},
mounted() {
this.startCakeRain();
},
methods: {
startCakeRain() {
const container = document.querySelector(".cake-rain-container");
const width = window.innerWidth;
const height = window.innerHeight;
setInterval(() => {
const x = Math.random() * width;
const speed = Math.random() * 5 + 3; // 控制速度
const size = Math.random() * 70 + 10; // 控制大小
const cake = {
id: Date.now() + Math.random(),
style: {
left: x + "px",
animation: `cake-rain ${speed}s linear forwards`,
width: size + "px",
height: size + "px"
}
};
this.cakes.push(cake);
setTimeout(() => {
this.cakes = this.cakes.filter(c => c.id !== cake.id);
}, speed * 1000);
}, 200);
}
}
};
</script>
<style>
.cake-rain-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cake-rain {
position: absolute;
top: -50px;
opacity: 0.8;
animation-timing-function: ease-in-out;
transform: rotate(45deg);
z-index: 999;
}
@keyframes cake-rain {
0% {
top: -50px;
}
100% {
top: 100%;
}
}
</style>
veu 满屏生成飘落蛋糕
于 2023-03-05 14:07:32 首次发布