css怎么实现图片切换 |css3 左右切换效果

<div class="img-container">
<img src="image1.jpg">
</div>

第二步，定义CSS样式，让图片容器与图片都能够居中显示：

.img-container {
width: 500px;
height: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}

第三步，使用CSS的伪类选择器实现图片的切换。大家可以使用来作为切换按钮：

<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<div class="img-container">
<img src="image1.jpg" class="slide" />
<img src="image2.jpg" class="slide" />
<img src="image3.jpg" class="slide" />
</div>

在CSS中定义伪类选择器：

#slide1:checked ~ .img-container img:nth-child(1),
#slide2:checked ~ .img-container img:nth-child(2),
#slide3:checked ~ .img-container img:nth-child(3) {
opacity: 1;
-webkit-animation: fade-in 1s;
animation: fade-in 1s;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

通过以上CSS代码，大家实现了图片切换。

总结一下，通过使用CSS的伪类选择器及其相应的动画效果，大家可以轻松地实现图片切换的效果。代码虽然繁琐，但是操作简单，大家可以开发一下自己的图片切换。