自从marquee标签被废弃之后，制作移动文字就变成了一件麻烦事。虽然网上也能找到一些解决方案，但是总有这样那样的问题。不过，vue组件的出现，使得制作一个简单的跑马灯组件成为了可能。
在制作之前，先要观察出原来的marquee标签有哪些特点：文字一开始不显示，然后从最右边出现往左边滚动，从左边滚出视野，当最后一个字滚出视野后，再从最右边出来。
如何才能实现这样的效果呢，很容易想到的是使用translateX：
.app-marquee
white-space: nowrap
overflow: hidden
.inner
display inline-block
animation marquee 20s linear infinite
@keyframes marquee
0%
transform translateX(100%)
100%
transform translateX(-100%)
然而，效果并不是我们预期的那样，因为translateX里面的百分比值是相对于.inner元素本身，而不是它的容器.app-marquee。这个时候想到元素的margin百分比是相对于容器的，所以最终组件代码如下：
完整的组件代码
对的，使用margin-left来实现元素位于视野之外右侧，使用translateX实现元素位于视野之外左侧，两者结合就完成了简单的marquee的效果。
