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

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

效果图

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

上代码

//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 部分替换就好

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