css3利用animation关键帧动画实现轮播图

1、原理说明：

见视频：168-关键帧动画-轮播案例_哔哩哔哩_bilibili

 （前3:44分钟）

文字说明：一个盒子里放里一个长条的盒子放很多小盒子，小盒子里面放的是图片，然后让这个小盒子浮动起来，轮播就是让长条盒子动。

思路：让最外面盒子固定的宽度和高度，这个盒子就是为了显示图片的轮播效果的，所以让图片的盒子宽度和高度和最外面盒子的宽高一样，让里面的长条盒子宽度无限大，为了放下浮动的所有图片，现在就是因为长条盒子里的图片很多，宽度超过了最外面那个盒子，所以对于最外面的盒子存在内容溢出的效果，这时候用overflow：hidden溢出隐藏的效果，刚好显示在最外面盒子里的就是一张图片的大小（因为我们刚开始设置装图片的那个小盒子的宽高=最外面盒子的宽高），这时候就让长条盒子移动就可以实现图片的轮播。。

2、代码：