如何用CSS实现一串图片在一个固定的盒子里无缝连接的滚动效果:

如上图(想象它是一个无缝连接的滚动图), 那么怎么才能这个无缝滚动的效果呢?

1.首先准备一组长宽一样图片, 六七个就差不多了, 然后创建一个盒子,给这个盒子设置宽高(宽度尽量和图片一致,避免图片被拉伸, 宽度取决于你想让你个图片同时出现在视线内)

如上图, 我设置的是让这个盒子居于屏幕中心, 然后给了宽高和边框

2.在盒子里添加ul li标签(记得去除样式) 每个li标签里放入一张图片 然后让li标签浮起来(float:left) ,

给li设置宽高,并且让图片的宽高等于li的100%

 

此时效果如上图

3.给ul设置宽度,让li能排成一排, 宽度为所有li宽度之和

创造一个动画效果, 给ul添加 让这串图片朝左匀速循环运动

图中transform:translateX(1400px)是朝X轴负方向移动1400px(图片宽度之和)

 run是我设的动画名, 2s是动画时长, linear是匀速运动, infinite是无限循环

4.如下图所示, 图片是循环滚动起来了 但是中间仍有缝隙

这是因为ul的长度为所有图片的宽度,为了让所有的图片能全部移动一遍, 动画设置位移的长度得等于所有图片的长度.  当所有图片向左移动时,最后一个图片完全移出方框后,这个动画才算完成. 所以才会有三个图片大小的空白档 (三个图片的空白档是因为我想要这个框框能同时显示三个图片, 所以把框框宽度设置为三个图片的宽度 如果如果希望只显示两个图片, 那就是两个空白档)

4.那么这个问题怎么解决呢?

只需将图片的前三个复制到最后面, 动画位移的长度不变, 将ul的宽度增加三个li的大小就可以解决啦!

 

原理: 动画位移的长度不变, 在最后面加入开始的三个图片 , 当最后一个图片(不算之后加入的三张最开始的图片) 移出框框时,动画也正好完成了, 后加入的三个图片正好填补了框框的空白处, 此时动画设置的是无限循环效果, 当新一轮动画开始时, 正好又是最开始的三张图片在朝右位移, 因此才达到了无限循环的效果😀

 

 5.此时图片已达到无缝滚动的效果, 只需给父盒子设置溢出隐藏即可

 

 6.效果完成, 如下图所示

 

 以上就是用CSS3 动画效果实现的一个无缝滚动窗口的效果