当前位置：首页 > 资讯 > 系统环境 > 服务器应用

CSS实现循环无缝滚动

时间：2018-12-25 22:42 作者：小皮草来源：小皮草阅读：529
扫一扫，手机访问

摘要：最近看到微信阅读上面的本周推荐卡片的滚动动画效果，就想试试也实现一下。乍一看感觉只需做一下倾斜和移动的动画即可以了，其实主要的难点是如何做到无缝循环。微信阅读效果image实现思路倾斜使用 transform: rotate() 就可滚动使用 CSS Animation@keyframes move

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

微信阅读效果

image

实现思路

倾斜
使用 transform: rotate() 就可

滚动

使用 CSS Animation

@keyframes move {    0% {        transform: translateX(...);    }    100% {        transform: translateX(...);    }}

无缝循环
这个是难点。
首先需要明确的是，动画开始的画面和动画结束的画面应该是同一个画面，这样才能做到无缝循环。
screenshot
为此，需要添加少量重复的元素在末尾，作为衔接下次循环的过渡。
两个要素：
1. 添加足够的重复元素在原队列的末尾，这些重复元素是开头的那几个。
2. 计算一个完整队列走完的长度，这个长度就是一次循环画面偏移的距离。