css制作跑马灯

.scroll-content {
  overflow: hidden;
  flex: 1;
  height: 24px;
  line-height: 24px;
  position: relative;
  .scroll-text {
    position: absolute;
    white-space: nowrap;
    padding-left: 100%;
    animation: notice 10s 0s linear infinite both;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #757575;
  }
}
@keyframes notice {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

<div class="scroll-content">
 <span class="scroll-text">我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯我是跑马灯</span>
</div>