<!-- html -->
<view class="notice">
  <view><i class="iconfont icon-yangshengqi"></i></view>
  <view class="notice_desc">
    <view class="notice_text">{{ text }}</view>
  </view>
</view>

/* css */
.notice {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  display: flex;
}

.notice .notice_desc {
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.notice .notice_text {
  white-space: nowrap;
  width: 100%;
  animation: 8s loop linear infinite normal;
}

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

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

.notice .icon-yangshengqi {
  color: var(--theme_color);
  margin: 0 20rpx;
}