css平移从左到右换张照片

CSS平移从左到右换张照片是一种经常用于网页banner轮播的动画效果。我们可以使用CSS的transition和transform属性来实现该效果。

HTML代码：div class="slider">
      img src="image1.jpg" class="slide">
      img src="image2.jpg" class="slide">
      img src="image3.jpg" class="slide">
      img src="image4.jpg" class="slide">
    /div>
CSS代码：.slider {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
}
.slide {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: translateX(-100%);
      transition: transform 1s ease-in-out;
}
.slide.active {
      transform: translateX(0);
}
    

首先我们定义一个div，height为轮播图的高度，然后把overflow设为hidden，以隐藏图片的溢出部分。

接着我们为每个图片定义一个.slide类，把它们的position设为absolute，left和top设为0，width和height设为100%。初始时，我们把所有图片都向左平移一个图片的宽度（即-100%）。

然后我们还需要为当前显示的图片添加一个.active类，将其transform属性设置为0，这样它就会从左侧平移到显示区域。

最后，我们只需要通过JavaScript来控制.active类的切换即可实现整个轮播功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！