看過有利用JS定時器的，有利用微信小程式動畫API的，都比較複雜，須不知CSS3可以簡單的設定動畫效果咩，還是此方法so easy！

.wxml檔案：

<template name='raceLamp'>
  <view class='lamp_container'>
    <view class='lamp_text'>{{lampContent}}</view>
  </view>
</template>

（lampContent是要傳入的跑馬燈文字內容）

.wxss檔案：

.lamp_container {
  background-color: #fe4655;
  position: fixed;
  width: 100%;
  height: 50rpx;
  line-height: 44rpx;
  top: 0;
  left: 0;
  z-index: 10;
}

.lamp_text {
  color: #fff;
  font-size: 28rpx;
  display: inline-block;
  white-space: nowrap;
  animation: horseRunning 15s linear infinite;
}

@keyframes horseRunning {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
 

主要就是用了animation屬性，以及@keyframes規則，通過改變transform的x軸達到跑馬燈左右移動效果。（相關CSS屬性介紹可點選檢視）