CSS实现循环无缝滚动

最新推荐文章于 2024-09-08 14:30:06 发布

weixin_34127717

最新推荐文章于 2024-09-08 14:30:06 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bded03ae51d45635350d8fe

版权

最近看到微信阅读上面的本周推荐卡片的滚动动画效果，就想试试也实现一下。乍一看感觉只要做一下倾斜和移动的动画就可以了，其实主要的难点是如何做到无缝循环。

微信阅读效果

滚动

使用 CSS Animation

@keyframes move {
    0% {
        transform: translateX(...);
    }
    100% {
        transform: translateX(...);
    }
}
复制代码

无缝循环

这个是难点。

首先需要明确的是，动画开始的画面和动画结束的画面应该是同一个画面，这样才能做到无缝循环。

为此，需要增加一些重复的元素在末尾，作为衔接下次循环的过渡。

两个要素：
1. 增加足够的重复元素在原队列的末尾，这些重复元素是开头的那几个。
2. 计算一个完整队列走完的长度，这个长度就是一次循环画面偏移的距离。