微信小程序公告循环播放,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;
}

猜你喜欢

转载自blog.csdn.net/qq_33878858/article/details/82496009