微信小程序实现横向滚动文字

1.实现效果

横向滚wx.gif

2.实现思路

父元素设置overflow: hidden;
子元素添加一个动画，translateX

3.实现代码

<view class="box flex-row">
  <text class="r">纯CSS文字滚动播放</text>
</view>

/* pages/another/scrNews/index.wxss */
page {
  background-color: pink;
}

.box {
  width: 702rpx;
  margin: 10rpx auto;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.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%);
  }
}