依据文本长度实现滚动文本动画

需求场景：Vue2实现一个文本滚动的效果，超出固定宽度就无限循环的滚动，时间随文本长度变化而变化

效果如下：

需要考虑的点：

• 1.滚动的效果怎么做
• 2.什么时候该滚动，什么时候不滚动
• 3.长文本和短文本的滚动时间肯定不能一样，这个时间怎么定

刚接到需求，因为在此之前看过一篇博文，大致是前段时间在工位装摄像头的事件，掘金有篇敢在我工位装摄像头，吃我一记组合拳的文章，里面取巧用到了css原生的文本滚动效果，在电脑屏幕上滚动着老板看了兴奋不已的打工人激励文字，就想着应该还简单，没想到自己实现起来，却吃了大亏。

1.效果实现

这个刚开始肯定没头绪，先是一顿百度，找了个感觉靠谱的，一顿CV，发现不好使，然后不得不重头开始读他的想法，下面贴个我的代码吧。

大致就是给要滚动的元素的父级盒子 添加个overflow: hidden; ,然后给要滚动的元素添加上滚动动画，不换行，执行xx秒（animation: 10s linear infinite;），然后写个过渡动画，如果只有一个滚动的话，到这就完事了。

<div class="page-text-title">原告:</div>
<div class="scroll">
  <div class="scr