用C3实现无缝轮播
对对对，就这样
来来来，手把手教你们
在漫漫的前段学习过程中，轮播已经成为必不可少的前段需求，下面我就给大家说一种超级简单的方法实现无缝轮播滚动。
要求: 实现图片无缝轮播
1: 定义父级div
这个div的宽度为轮播图片元素的宽度 ，暂时不设置高度，据我了解，如果存在响应式，高度会根据情况变化，说多了说多了，这里先给大家说最简单的方法实现无缝轮播。
在这里图片宽度设置为200px，, 外边距溢出是overflow: hidden;大家都会吧
width: 200px;
overflow: hidden;
2: 在父级div下面定义一个div作为轮播图片容器 ,并且添加动画效果,设置属性为
width: 800px;这里设置四张图片宽度的总和,第四张图片与第一张图片相同。
别问我为什么，宝宝脾气不好。
一言不合就会打人的，我告诉你。
自定义动画，参数我就不说了，很长一串参数，这里我就不说了，自行百度。
animation: keyframe 7s ease 0s infinite normal;
3: 在轮播图片容器里面定义并统一每个图片的宽度, 并且让每个图片排成一行:(左浮动或者设置display: inline- block)
width: 200px;
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(-200px, 0)}
56%,70% { transform: translate(-400px, 0)}
84%,100% {transform: translate( -600px, 0)}
}
大概你做出来后心情会像一个三岁的孩子
