vue3 物体飘落效果

html

<template>
    <div class="content">
        <transition-group name="petal-fall" tag="ul">
            <img
                v-for="(petal, index) in petals"
                :key="index"
                class="petal"
                :src="petal.image"
                :style="petal.style"
            />
        </transition-group>
    </div>
</template>

js

<script lang="ts" setup>
import { reactive, ref } from 'vue'
const numberOfPetals = 8
const petals = initializePetals(numberOfPetals)
function initializePetals(numberOfPetals:any){
    const petals = []
    for(let i = 0; i<numberOfPetals;i++){
        petals.push(createPetal())
    }
    return petals
}
function createPetal(){
    return {
        image: new URL('../../../assets/web/plume.png', import.meta.url).href, //图片路径
        style: {
          top: `${Math.random() * 100}vh`, // 随机垂直位置
          left: `${Math.random() * 100}vw`, // 随机水平位置
          animationDuration: `${Math.random() * 5 + 5}s`, // 随机飘落时间
        },
      };
}
</script>

css

.content{
        background-image: url(../../../assets/web/service/BackgroundService.png);
        background-repeat: no-repeat;
        background-size:cover;
        width:100%;
        height:100vh;
        position: relative;
        .petal {
            position: absolute;
            width: 5vw; 
            height: 5vw;
            animation: fallAnimation linear infinite;
        }

        @keyframes fallAnimation {
            0% {
                transform: translateY(-100vh);
            }
            100% {
                transform: translateY(110%);
            }
        }
}