css间隔几秒实现顶部展示中奖弹幕

<template>
    <view class="barrages">
        <view v-if="showHidden">
            <image class="gif" src="背景图')" mode="aspectFill"></image>
            <view class="barrages-item" v-if="barrages.length > 0">
                <view class="tag flex-align">
                    <image :src="barrages[index].imgUrl" mode="widthFix"></image>
                    <view>
                        XXXXX拼团成功领取<text>{{barrages[index].money}}元</text>现金
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                barrages: [],
                index: 0,
                showHidden: false
            }
        },
        mounted() {
            this.getBarrages()
        },
        methods: {
            // 间隔seconds秒展示下一条
            intervalShow(seconds) {
                setInterval(() => {
                    this.showHidden = !this.showHidden
                    // 真假切换,真时才显示和index++ 所以显示间隔时间是设置的两倍,修改时注意
                    if (this.showHidden) {
                        if (this.index >= this.barrages.length - 1) {
                            this.index = -1
                        }
                        this.index++
                    }
                }, seconds)
            },
            getBarrages() {
                this.barrages = [{
                        money: 1500,
                        imgUrl: '头像'
                    },
                    {
                        money: 100,
                        imgUrl: '头像'
                    }
                ]
                // 动画时间是6秒 所以一半是3秒 3000
                let timer = 5000 + 3000
                this.intervalShow(timer)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .barrages {
        width: 100%;
        height: 120rpx;
        overflow: hidden;
        white-space: nowrap;
        position: relative;

        .gif {
            width: 100%;
            height: 120rpx;
            position: absolute;
            left: 0;
            top: 0;
            animation: gifbgc 5.5s linear 0.5s forwards;
        }

        @keyframes gifbgc {
            0% {
                opacity: 1;
            }

            99% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

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

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

            .tag {
                height: 120rpx;
                font-size: 32rpx;
                font-weight: bold;
                opacity: 0;
                animation: barrage 5s linear 0.5s;

                view {
                    color: #fff;
                    margin-left: 80rpx;
                }

                text {
                    font-size: 40rpx;
                    line-height: 1;
                    color:#fcdb66;
                }

                image {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 30rpx;
                    margin-top: 30rpx;
                }

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

                    100% {
                        opacity: 1;
                        transform: translateX(-100%);
                    }
                }
            }
        }
    }
</style>

效果图如下：