微信小程序文字滚动

代码示例

wxml

<text class="r" style="color: #FFFFFF;">
    滚动文字：自行填写
</text>

wxss

.r {
  white-space: nowrap;
  animation: 10s loop linear infinite normal;
  display: inline-block;
  vertical-align: top;
  font-size: 26rpx;
  color: #333;
}

@keyframes loop {
  0% {
    transform: translateX(350px);
    -webkit-transform: translateX(350px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes loop {
  0% {
    transform: translateX(300px);
    -webkit-transform: translateX(300px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}