背景图片太长时，动画轮播居中问题解决 css

首先先新建一个html文件：

【背景图片太长时，动画轮播居中问题解决】先给他一个父元素div，然后给他三个孩子div，其实放图片的话一个div就够了，至于这里为什么有三个，是为了能让他在页面放大缩小时，轮播区域仍然居中，也就是说你看到的不一定是全部图片（放大倍数太大时，图片看不全），但一定是这个轮播图片的中间。
接着为他填充css样式，让他可以实现轮播

这是第一步，给父元素和子元素加样式，由于屏幕大小一般不太大，所以建议先缩放到最小，待完成后再查看正常情况下效果；

这是为div.son加动画，让他实现轮播效果；
background-position是让背景图片一直在div.son中间的，不能省略；
background-repeat，因为我的div.son就是按照最大的图片宽高来设置的，所以可以省略，但如果你的有图片大小比较小，你就需要这个属性，让他看起来不会重复。
@keyframes是动画的写法。
但这个效果有个致命的bug，那就是当你将缩放比例调大的时候，div.son模块是按照屏幕视口最左端来铺展的，也就是说你的1920px图片是以屏幕最左侧为起点来铺展的，因此你在屏幕中看不到最中间的图片，这不是我们想要的效果，这是第一点。第二点是当你页面缩放比例变大时，将产生滚动条。下面将解决这两个问题：

首先让div.father变成伸缩盒，然后给左右两个div都加上flex:1；你也可以左右两个div写一个类，因为属性数值都一样，我这样写是为了看起来方便！这样他既不会产生滚动条，也实现了我们的需求。
最后效果是：