css实现标题跑马灯效果

css实现标题跑马灯效果

      <div class="topBar">
        <span class="scrolling-text">滚动字幕</span>
      </div>

@keyframes marquee {
  0% {
    transform: translateX(300%);
  }

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

  .topBar {
    width:100%;
    height: 45px;
    line-height: 45px;
    background: #FFE6CC;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: $fontCoco;
    overflow: hidden;
    position: relative;

    .scrolling-text {
      display: inline-block;
      white-space: nowrap;
      animation: marquee 30s linear infinite;
    }

    .scrolling-text:hover {
      animation-play-state: paused;
      cursor: pointer;
    }
  }