css 泡泡动画

<view class="bubble">
    <view class="item"
        :style="{background:'url(气泡) left top/100% no-repeat'}"
        v-for="(item,index) in images" :key="index">
        <image class="image" :src="item" mode="aspectFit"></image>
    </view>
</view>

 .bubble {
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;

    .item {
        position: absolute;
        height: 100rpx;
        width: 100rpx;
        background-size: 100% 100%;
        opacity: 0;
        border-radius: 50%;
        animation: flying ease-in infinite;
        display: flex;
        align-items: center;
        justify-content: center;

        .image {
            height: 50rpx;
            width: 50rpx;
        }
    }

    .item:nth-child(1) {
        left: 20%;
        top: 500rpx;
        width: 100rpx;
        height: 100rpx;
        animation-duration: 3s;
        animation-delay: 2s;
    }

    .item:nth-child(2) {
        left: 30%;
        top: 500rpx;
        width: 100rpx;
        height: 100rpx;
        animation-duration: 3s;
        animation-delay: 1s;
    }

    .item:nth-child(3) {
        top: 400rpx;
        height: 100rpx;
        animation-duration: 3s;
        animation-delay: 0s;
    }

    .item:nth-child(4) {
        top: 500rpx;
        right: 30%;
        width: 100rpx;
        height: 100rpx;
        animation-duration: 3s;
        animation-delay: 1500ms;
    }

    .item:nth-child(5) {
        top: 500rpx;
        right: 20%;
        width: 100rpx;
        height: 100rpx;
        animation-duration: 3s;
        animation-delay: 2500ms;
    }

    @keyframes flying {
        0% {
            transform: translateX(0rpx);
        }

        25% {
            transform: translateX(10rpx);
            opacity: 0.8;
        }

        50% {
            width: 120rpx;
            height: 120rpx;
            transform: translateX(-20rpx);
            opacity: 1;
        }

        75% {
            transform: translateX(10rpx);
            opacity: 1;
            width: 100rpx;
            height: 100rpx;
        }

        100% {
            top: -20rpx;
            transform: translateX(-20rpx);
            opacity: 0;
        }
    }
}

参考链接：zhuanlan.zhihu.com/p/449273895…