用css动画制作跑马灯组件

自从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的效果。