小程序跑马灯

看了很多的跑马灯都写的不太符合要求，这个跑马灯的需求是初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，本文只做到初始化从屏幕的初始化从屏幕的1/2处开始，结束后第二次与上一次间隔屏幕一半的宽度，从屏幕右侧开始滑动，第三次还是从屏幕的1/2处，这个不知道怎么解决；跪求评论

1.html

<!-- css3跑马灯 --> <view style="position: relative;height:50rpx;"><view class="marquee-box"><view class="off-left marquee2" style="animation-duration:{
   {timeInterval}}s;"><view class="first-marquee">{
   {marqueeText}}</view><view class="second-marquee">{
   {marqueeText}}</view></view></view></view>

2.css

.marquee-box {position: relative;width: 100%;
}
.off-left {display: flex;text-align: right;position: absolute; left: 0;top: 0;white-space: nowrap;-webkit-animation: marqueeText 30s linear infinite;animation: marqueeText 30s linear infinite;
}
.first-marquee{padding-left: 375rpx;
}
.second-marquee{padding-left: 375rpx;//从屏幕的1/2处开始，第二条间隔屏幕1/2
}

3.js

 data={// marqueeText: '您的年利率为23.976%，基于额度激活前一工作日全国银行间同业拆借中心公布的最新1年期贷款市场报价利率（LPR）4.05% + 13.95%形成。',marqueeText: '短的跑马灯',timeInterval: 10}async onLoad() { //创建节点选择器var query = wx.createSelectorQuery();//选择idvar that = this;//计算css3跑马灯的长度query.select('.marquee2').boundingClientRect(function (rect) {// 设定每秒移动40pxlet timeSet = rect.width / 40 ; console.log('timeSet1',timeSet);that.setData({  timeInterval: timeSet});}).exec();}