html:

<view class="marquee">

    <view class="content">

        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>

        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>

        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>

    </view>

</view>
css:

@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }

.marquee{

    width: 100%;

    height: 44px;

    line-height: 44px;

    background: #fff;

    border: none;

    display: block;

    margin: 0 auto;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: clip;

    position: relative;

    font-size: 28rpx;

}

.marquee .content{

    display: inline-block;

    position: relative;

    padding-right: 0px;

    animation: kf-marque-animation 11.3s linear infinite;

    white-space: nowrap;

}