vue 文字跑马灯

<template>
  <div class="marquee-container">
    <div class="marquee-content">
      <div>{
   
   { marqueeText }}</div>
      <div>{
   
   { marqueeText }}</div> <!-- 复制一份文本，用于无缝衔接 -->
    </div>
  </div>
</template>

<style>
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 移动到一半的位置 */
  }
}

.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-content {
  white-space: nowrap;
  display: inline-block;
  animation: marquee 20s linear infinite;
}
</style>

在这个示例中，我们复制了一份文本，并将其放在原始文本的后面，以实现无缝衔接的效果。使用animation: marquee 20s linear infinite;，从而实现20s匀速循环滚动。