CSS 实现跑马灯效果 开箱即用

html

<div class="marquee-box">
        <div class="marquee-content" :style="{animationDuration: marqueeStr.length * 0.2 + 5 + 's'}">
            {{marqueeStr}}
        </div>
    </div>

变量

this.marqueeStr= "跑马灯！！！跑马灯！！！"

css

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

.marquee-content {
  white-space: nowrap;
  display: inline-block;
  color: chocolate;
  animation: marqueeAnim 5s linear 0s infinite;
}

.marquee-box{
  width: 300px;
  height: 30px;
  text-align: left;
  line-height: 30px;
  overflow: hidden;
  background-color: burlywood;
}