在Vue中使用CSS3实现内容无缝滚动的示例代码

一、效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求。下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二、无缝滚动原理 1、容器宽高固定,超出内容隐藏; 2、内容准备2份,现参与滚动的内容有A、B两份,向左滚动; 3、滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果; 4、在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A、B内容一模一样,这个复原过程很难看出来; 5、循环第3步; 三、代码 1、html部分 <!-- 容器 --> <u