CSS---纯CSS实现公告中文字水平无限循环滚动

 在小程序的wxml中定义滚动的内容

wxml中
<view class='box'>
    <view class="animate" id='headerWidth' style='{{noticeTime}}'>
		<view class="animate_item" bindtap="toNoticeDetail" wx:for="{{noticeList}}" data-id="{{item.id}}" wx:key="index">{{item.title}}</view>
	</view>
</view>

定义动画 

wxss
.animate {
  padding-top: 16rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 36rpx;
  display: flex;
  white-space: nowrap;

}

.animate_item {
  width: 100%;
  margin-left: 200rpx;
}

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

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

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

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

 获取数据，动态增加动画

data:{
noticeList: [],
noticeTime: 0,
}，
methods: {
    getNoticeList(e) {
      let vm = this
      http.post('notice/findNoticeInfo', {
        'state': 1,
        'id': ''
      }, function (res) {
        if (res.result.commodityInfos && res.result.commodityInfos.length > 0) {
          vm.setData({
            noticeList: res.result.commodityInfos
          })
          var length = res.result.commodityInfos.map(item => item.title.length).reduce((pre, cur) => {
            return Number(pre) + Number(cur)
          }) * 16  //文字长度
          console.log(length)
          let lastLength = length + (res.result.commodityInfos.length * 200)
          console.log(lastLength)
          let time = +(lastLength / 70).toFixed(0)
          let sty = `animation: ${time}s wordsLoop linear infinite normal`
          vm.setData({
            noticeTime: sty
          })
        }
      })
    },
}