css 字幕水平滚动

1、html

<view wx:if="{{roll_notice.length > 0}}" class="marquee">
  <view class="content" style="animation-duration:{{roll_notice.length * 2}}s">
    <text wx:for="{{roll_notice}}" wx:key="index">{{item.remark}}</text>
  </view>
</view>

2、css

 /*滚动字幕*/
.marquee{
  width: 100%;
  height: 24px;
  line-height: 26px;
  color: #888888;
  border: none;
  display: block;
  margin: 3px auto 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  position: relative;
  font-size: 12px;
}
.marquee .content{
  display: inline-block;
  position: relative;
  padding-right: 0px;
  animation: marque-animation linear infinite;
  white-space: nowrap;
}
.marquee .content text {
  padding-left: 20vw;
}
.marquee .content text:first-child {
  padding-left: 90vw;
}

3、完成了，看效果