css3实现无缝轮播图片
实现思路:
需求: 实现三张图片无缝轮播
1: 定义一个父级div ,
这个div的宽度为轮播图片元素的宽度
本文这里用的img宽度是114px, 溢出的时候设置属 性:overflow: hidden;
width: 114px;
overflow: hidden;
2: 在这个父级div下面定义一个div作为轮播图片容器 ,并且添加动画效果,设置属性为
width: calc(114px * 4);//这里设置四张图片宽度的总和,第四张图片与第一张图片相同,why?往下看
animation: keyframe 7s ease 0s infinite normal;
3: 在轮播图片容器里面定义并统一每个图片的宽度, 并且让每个图片排成一行:(左浮动或者设置display: inline- block)
width: 114px;
float: left; //使用这行代码或者下面这行代码,下面那行代码需要消除每个img之间的间距
/*display: inline-block;*/
4: 第2步中的keyframe设置动画帧数,
0%,14% 这样的写法的意义在于:
从0%帧数开始轮播下一张图片,
在14%帧数开始停止直到28%
后面的以此类推
这里设置了四段运动 (0%,14%) (28%,42%) (56%,70%) (84%,100%)
其中(84%,100%)轮播的图片是跟第一张图片是相同,当animation设置了noramal值后,动画会从头播放,
如果最后一张图片跟第一张图片不一样,动画从头播放, 就会有切换的效果
设置最尾的图片跟第一张相同后,当 100% ==> 到 0% 时因为图片一样,看不到切换的效果,相当于蒙蔽了你的眼睛
@-webkit-keyframes keyframe{
0%,14% { transform: translate(0px, 0)}
28%,42% {transform: translate(-114px, 0)}
56%,70% { transform: translate(-228px, 0)}
84%,100% {transform: translate( -342px, 0)}
}
全部代码链接
