Skip to content

css 无缝滚动动画

css 动画无限滚动技巧,例如滚动容器的高度为 100px,此时内容为 300px,当动画上下滚动时,我们只需要给 300px 的内容拼接上可展示的滚动内容(100px),设置动画无限重复。然后去滚动这 400px 的内容,当滚动到底部后,动画回到起始点,由于多拼接了这 100px 的内容,所以看起来就像是无缝滚动。

总结为一句话就是:要创建一个无缝循环的 CSS 动画,你需要确保动画在结束时能够立即重置到起始状态。