用css+js简单实现红包雨

<template>
   
</template>

<script>
export default {
    mounted() {
        const packet = Array.from(new Array(30))
        const maxLeft = document.body.offsetWidth - 40
        document.body.innerHTML = packet.map(v => {
            return `<img src="./images/hb.png" class="🧧" 
            style="left:${Math.random() * maxLeft}px;
            animation-duration: ${Math.random() * 2 + 1}s;"
        />`
        }).join('')
    }
}
</script>

<style>
.🧧 {
    position: fixed;
    top: -100px;
    width: 40px;
    animation: 🧧 infinite linear;
}

@keyframes 🧧 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(150vh);
    }
}
</style>