[分享]css两个图片轮播

CSS是前端开发中非常重要的一环，它可以用来控制网页样式，实现很多有趣的效果，比如两个图片轮播。下面就来介绍两种实现图片轮播的CSS代码。/第一种轮播/ .imagecarousel{ display...

CSS是前端开发中非常重要的一环，它可以用来控制网页样式，实现很多有趣的效果，比如两个图片轮播。下面就来介绍两种实现图片轮播的CSS代码。

/*第一种轮播*/
.image-carousel{
  display: flex;
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 0 auto;
}
 
.image-carousel img{
  width: 300px;
  height: 200px;
  transition: 1s;
}
 
.image-carousel:hover img:last-child{
  transform: translateX(-300px);
}
 
/*第二种轮播*/
.carousel{
  width: 300px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}
 
.carousel img{
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: 1s;
}
 
.carousel img:first-child{
  opacity: 1;
}
 
.carousel:hover img:first-child{
  opacity: 0;
}
 
.carousel:hover img:last-child{
  opacity: 1;
} 

第一种轮播是通过给图片容器添加overflow属性和变换属性实现的。当鼠标悬浮在图片上时，利用:hover伪类使最后一张图片向左平移，达到轮播的效果。第二种轮播是通过绝对定位和透明度的变换实现的。最开始只显示第一张图片，当鼠标悬浮时，第一张图片变为透明，同时最后一张图片变为不透明，实现轮播。