vue3.0一句代码实现满屏红包雨
话不多说,先看效果
抢红包
<template>
<div class="home">
<h1>一句代码实现满屏红包雨</h1>
<div
:style="{
'animation-duration': Math.random() * 3 + 5+ 's',
left: Math.random() * 800 + 'px',
}"
class="iconstyle"
v-for="(n, index) in 5"
:key="index"
@click="qiang(index)"
></div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, createVNode, onMounted } from "vue";
const qiang = (index:number) => {
alert(`抢到${index}元`);
};
</script>
<style scoped>
.iconstyle {
position: fixed;
top: 0;
width: 40px;
height: 40px;
background: url("@/assets/1.png") no-repeat;
background-size: 100% 100%;
animation: move infinite linear;
}
@keyframes move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
</style>