css 实现弹幕背景放大缩小文字从右往左滚动

 <view class="barrages">
    <swiper style="width: 100%; height:62rpx;" :autoplay="true" interval="6000" :circular="true" :current="current"
        @change="swiperChange" @animationfinish="animationfinish">
        <swiper-item class="barrages-item" v-for="(item, index) in barrages" :key="index">
            <image :animation="animationData" :src="$util.img(item.imgUrl)">
            </image>
            <view class="tag font-size-left-10">
                {{ item.content }}
            </view>
        </swiper-item>
    </swiper>
</view>

initAnimation() {
    var animation = uni.createAnimation({
        duration: 5000,
        timingFunction: 'ease',
    })
    this.animation = animation
    // 先放大
    this.animation.scaleY(0).step({
        duration: 100
    })
    this.animation.scaleY(1).step({
        duration: 200
    })
    // 后缩小
    this.animation.scaleY(1).step({
        duration: 4600
    })
    this.animation.scaleY(0).step({
        duration: 200
    })
    this.animationData = this.animation.export()
},
getBarrages() {
    this.$api.sendRequest({
        url: '/activity/activityzone/get_grand_prize',
        data: {
            type: this.type
        },
        success: res => {
            if (200 == res.code) {
                this.barrages = res.data.map((item, index) => {
                    return {
                        imgUrl: index % 2 == 0 ?
                            'web/uniapp/home/blindbox/barrage-bg.png' :
                            'web/uniapp/home/blindbox-integral/barrage-bg.png',
                        content: this.$util.nameEllipsis(item.name) + item
                            .bay_info
                    }
                });
                this.initAnimation()
            }
        }
    });
},
swiperChange() {
    this.animationData = {}
},
animationfinish(e) {
    this.current = e.detail.current;
    this.initAnimation()
}

.barrages {
    width: 100%;
    height: 62rpx;
    white-space: nowrap;
    display: flex;

    &-item {
        width: 100%;
        height: 62rpx;
        position: relative;

        image {
            width: 100%;
            height: 62rpx;
            position: absolute;
            left: 0;
            top: 0;
        }

        .tag {
            color: #fff;
            line-height: 62rpx;
            opacity: 0;
            animation: barrage 6s linear 0.5s infinite;

            @keyframes barrage {
                0% {
                    opacity: 1;
                    transform: translateX(100%);
                }

                100% {
                    opacity: 1;
                    transform: translateX(-100%);
                }
            }
        }
    }
}

参考链接：uniapp.dcloud.net.cn/api/ui/anim…