微信小程序公告循环播放，css实现方法

微信小程序公告循环播放，主要是使用css来实现：

 

    <view  class='tongzhitext'>
      <text class="tongzhi-text">这点是公告内容，长度要和动画的设置长度一起调整</text>
    </view>

 

@keyframes remindMessage {
  0% {
    -webkit-transform: translateX(90%);
  }

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

.tongzhitext {
  line-height: 50rpx;
  margin-left:10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tongzhi-text {
  font-size: 28rpx;
animation: remindMessage 15s linear infinite;
    width: 100%;
  color: #000;
  display: block;
}