跑马灯代码

html代码

<div class="cssmarquee">
      <div class="wrapper" :style="animationStyle">
        <p class="marqueeWords" :style="animationStyle">
         {{noticeMsg}} </p>
      </div>
    </div>

js代码

动态计算动画时间

  this.animationStyle = `animation-duration: ${this.noticeMsg.length / 40 * 10}s`

css代码

.cssmarquee {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}

.cssmarquee .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: cssmarqueeWrapper 10s linear infinite;
}

.cssmarquee .marqueeWords {
  position: absolute;
  background: rgba(0, 255, 255, .5);
  height: 100%;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #fff;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  /* no wrap */
  transform: translateX(0);
  animation: cssmarquee 10s linear infinite;
}

@keyframes cssmarqueeWrapper {
  0% {
    transform: translateX(100%);
    /* parent 100% */
  }

  100% {
    transform: translateX(0);
  }
}

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

  100% {
    transform: translateX(-100%);
    /* words -100% */
  }
}