vue3 物体飘落效果

html

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