纯css实现横向单行公告无缝滚动

1. 需要一个大容器，设置固定宽度，overflow:hidden
2. 公告也需要一个容器，设为inline-block
3. 动画通过translateX从右往左移动，起点为外层容器的宽度，终点为公告本身的宽度(-100%)

<view class="water_tips">
  <view class="water_text">公告公告公告公告公告公告公告公告公告公告公告公告</view>
</view>

.water_tips {
  position: absolute;
  top: 310rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 664rpx;
  height: 40rpx;
  line-height: 34rpx;
  border-radius: 20rpx;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 2rpx solid rgba(255, 255, 255, 0.7);
  box-sizing: border-box;

  .water_text {
    white-space: nowrap;
    display: inline-block;
    color: #fff;
    font-size: 24rpx;
    animation: 10s wordsLoop linear infinite normal;
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(664rpx);
  }
  100% {
    transform: translateX(-100%);
  }
}