纯 CSS 无缝跑马灯

无缝跑马灯最佳实践。

---

一种很常见的网页效果，图片或者文字连续滚动，常见于循环展示企业 logo，难点在于无缝，即图片滚动到末尾时，末尾处要拼接上图片的开头部分。看到网上有的要用到 js，实际上有个很简单的方法，把两张一样的图片纵向排列，外层容器添加如下动画，
动画刚开始时与第一张图片刚好完全消失是一模一样的，在这一瞬间重置动画，就看不出缝隙了。

<div class="logos">
    <img src="xxx.jpg" alt="">
    <img src="xxx.jpg" alt="">
</div>

markup

Copy

@keyframes logo {
    100% {
        transform: translateY(-50%);
    }
}
.logos {
    animation: 6s logo linear infinite normal;
}

css

Copy