css实现跑马灯

uni-app开发小程序时遇到个需求：跑马灯

非小程序改一下标签也是可用的

因文案长度不同，可以自行调整 --marqueeWidth--，from { margin-left：}，.confirm_tips_text{margin: 0 140rpx 0 0;} 这三个值，慢慢调哈

<view v-if="isConfirm" class="confirm_tips_top" style="--marqueeWidth--:-20em">
    <view class="confirm_tips_content">
        <view class="confirm_tips_text">*已超过确认时间，当前确认可能会在次月打款</view>
        <view class="confirm_tips_text">*已超过确认时间，当前确认可能会在次月打款</view>
    </view>
</view>
<style scoped>
    /*首页跑马灯效果*/
    @keyframes around {
      from {
       margin-left: 20%
      }
      to {
       /* var接受传入的变量 */
       margin-left: var(--marqueeWidth--);
      }
     }

    .confirm_tips_top{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 48rpx;
        line-height: 48rpx;
        color: #FC753B;
        font-size: 24rpx;
        font-weight: 500;
        font-family: PingFangSC-Medium, PingFang SC;
        background-color: #FFF1EB;
        z-index: 30;
    }
    .confirm_tips_top:hover{
        /* 不起作用 */
        animation-play-state: paused;
    }
    .confirm_tips_content{
        white-space: nowrap;
        animation-name: around;
        animation-duration: 6s;  /*过渡时间*/
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .confirm_tips_text{
        display: inline-block;
        margin: 0 140rpx 0 0;
    }
</style>