纯CSS3实现横向无缝滚动中奖跑马灯效果

原创 知乎其微 教程 CSS3 835阅读 2018-06-08 16:48:18 举报

废话不多说,直接上代码

这里为什么数据是渲染两次
这是为了保证第一次渲染的数据的最后一条的right值刚好为0时,用第二次渲染的数据来模拟第一次渲染的数据的初始位置
这点和无缝轮播图一样的道理,无缝轮播图也是将第一张图复制一份插入到list的最后;

为什么这里要位移50.2%,正常情况我们位移50%就行了,刚好第二次渲染的数据的第一条left为0时,然后瞬间将第一次渲染的数据的left变为0,给用户感觉就是无缝链接的。
50.2%是因为瞬间将translate的X位置变为0的时候,实际我们的位移已经走了一丢丢,如果刚好是50%,那么translate变为0的时候,会有一点点跳动

还有一点,我们的动画时间必须是动态的赋值,你想,如果你的数据只有3条而且简短,结果动画时间还是8秒,那么这个动画效果会走得很慢,反之走得很快,所以我们需要根据 list的宽度/盒子的宽度,来合理分配这个动画到底持续多久;
这点你们就自己去摸索吧,这里就不说了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复