css 实现跑马灯效果

最近有一个跑马灯的效果，需要实现。本来想偷个懒从网上随便拷贝一个，结果发现都不太理想，于是自己动手封装了一个，和大家分享一下。

首先我们要知道跑马灯的具体效果是什么样子的。

效果图

我们通过效果图可以看到，在可是区域内有一行文字，当文字从左侧消失后，需要在右侧展示，一直循环展示。

上代码

//html
<div class="box">
   <p class="txt" v-for="(n,j) in 2" :key="j">将要跑起来的文案--------------跑起来</p>
</div>


//css 
.box{
   color: #A35FB3;
   font-size: 20px;
   line-height: 50px;
   .txt{
     display: inline-block;
     width: 100%;
     animation: 20s wordsLoop linear infinite normal;
   }
}

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

分析

可能有的小伙伴会问到，我为什么把文字 渲染了两遍？

那是因为 跑马灯效果，并不只是单纯的将一行文字动起来，还需要考虑消失的文字，需要接着从后边无缝的跑出来，其实一段文字也能跑，但是没有两段文字的效果完美。

扩展 如果是要求封装组件的话，只需要props接收参数，将 文案 .txt 部分替换就好

当然还有更好的实现方式的话，欢迎评论区留言~