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

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%);
            }
        }
}