如何用CSS应用系统定制开发实现一串图片在一个固应用系统定制开发定的盒子里无缝连接的滚动效果:
如上图(应用系统定制开发想象它是一个无缝连接的滚动图), 应用系统定制开发那么怎么才能这个无缝应用系统定制开发滚动的效果呢?
1.首先准备一组长宽一样图片, 六七个就差不多了, 然后创建一个盒子,给这个盒子设置宽高(宽度尽量和图片一致,避免图片被拉伸, 宽度取决于你想让你个图片同时出现在视线内)
如上图, 我设置的是让这个盒子居于屏幕中心, 然后给了宽高和边框
2.在盒子里添加ul (记得去除样式) 每个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 动画效果实现的一个无缝滚动窗口的效果