小程序使用animation实现跑马灯

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; }