css3利用animation关键帧动画实现轮播图
1、原理说明：
观看多媒体内容（如168-关键帧动画-轮播案例_哔哩哔哩_bilibili）
（前3:44分钟）
一个盒子里放置了一个小型矩形框，并在其中嵌入了多个小型矩形框（即小盒子）。这些小盒子内部填充了大量图片元素。通过动态效果实现的小盒子滑动展示成为可能，并且轮播效果的核心机制在于动态调整外围的大长条区域以实现滚动切换
方案是将最外层容器设置为固定宽度与高度，并将其主要功能定义为呈现轮播图片的效果。为了实现图片轮播效果，在内部设置一个无限宽但高度受限的滚动条区域，并确保能够容纳所有滚动展示的图片内容。由于内部滚动条区域中的图片数量较多，其总宽度超过了外层容器的空间限制，在这种情况下采用overflow：hidden样式来实现溢出隐藏效果。这样，在外层盒子里只会出现一张完整的图片（因为我们最初将装有单张图像的小方框设置了与外层盒子完全相同的宽高比），因此当内部分割板区域中的滚动条移动时即可轻松实现多张图标的循环展示效果。
2、代码：
结果：见下面视频链接
在最后一帧至首帧之间出现短暂跳跃
最终效果具备轮播能力，在当前的操作中当轮滑到达最后一个页面时会直接从该页面跳跃至第一个页面并结束操作。为了达到预期效果即让最后一批览结束后能够缓慢过渡至初始页面我们需要在最后一批图像后添加初始页面的图像即可
✍改善后的效果：
改动过的代码（其他的和上面一样，都不变）
结果：见下面视频链接
首次优化达成了轮播目标（腾讯视频）
然而在结果中却不断出现轮播画面 考察到的所有轮播页面都 每张轮播页面播放完成后会短暂停顿约几秒以切换至下一张图片 这样的效果依赖于使用的属性
✍改善后的效果：
改过的部分代码：
本代码的核心思路在于具体来说，在这段代码中适当增加关键帧数量以实现动态效果。具体而言，在0-5%区间内进行快速切换以展示初始状态；随后，在5%-25%区间内停留在此处一段时间内；接着，在25%-30%区间内切换至下一张图片；而在30%-50%区间内则维持当前图片以模拟典型的滑动效果；若希望某张图片在被点击时停止切换并固定显示，则需参考其中"1"部分的具体实现逻辑。
图示结果：见下面视频链接
通过技术手段轮转播放至每个视频短暂停顿几秒在腾讯视频平台展示