css 字幕闪烁

1、html

<!-- 滚动字幕 -->
<view class="marque_notice" wx:if="{{flag && roll_notice.length > 0}}">
  <view class="roll_notice" catchtap="goProduct" data-value="{{roll_notice[count].product_id}}">
    <image src="{{roll_notice[count].avatar}}"/>
    <text class="one-nowrap">{{count}}{{roll_notice[count].remark}}</text>
    <van-icon name="arrow"></van-icon>
  </view>
</view>

2、css

/*闪烁字幕*/
.marque_notice {
  animation: marque-notices 3.1s;
}
@keyframes marque-notices{
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.roll_notice {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  max-width: 70vw;
  top: 65px;
  left: 15px;
  color: #ffffff;
  background-color: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 2px 5px;
  font-size: 14px;
  box-sizing: border-box;
}
.roll_notice image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.roll_notice text {
  margin-left: 5px;
  position: relative;
  font-size: 12px;
}

3、js

data: {
    roll_notice: [],
    count: 0,
    countFlag: 0,
    flag: true
  },

/**
 * 滚动字幕数组
 */
getRollNotice() {
  fn.get('scores/user_logs', { type: 1 }, res => {
    if (res.status === 'success') {
      this.setData({ roll_notice: res.data });
      setTimeout(this.timer, 3100);
    }
  });
},
/**
 * 头部淡出淡出动画
 */
timer() {
  if (this.data.countFlag % 2 === 1) {
    this.setData({
      count: this.data.count + 1,
      flag: !this.data.flag,
      countFlag: this.data.countFlag + 1
    });
  } else {
    this.setData({
      flag: !this.data.flag,
      countFlag: this.data.countFlag + 1
    });
  }
  if (this.data.count === this.data.roll_notice.length) {
    this.setData({
      count: 0,
      countFlag: 0
    });
  }
  setTimeout(this.timer, 3100);
}

4、完成了，看效果