[分享]css3怎么实现图片轮播

CSS3是一种非常流行的前端技术，现在很多网站都采用它来实现图片轮播。下面我们来介绍一下如何使用CSS3来实现图片轮播。/ CSS代码 / .container{ : relative; width:...

CSS3是一种非常流行的前端技术，现在很多网站都采用它来实现图片轮播。下面我们来介绍一下如何使用CSS3来实现图片轮播。

/* CSS代码 */
.container{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 50px auto;
    overflow: hidden;
}

.container img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.container img:first-child{
    opacity: 1;
}

.container input[type="radio"]{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.container input[type="radio"]:nth-child(1):checked ~ img:nth-child(2),
.container input[type="radio"]:nth-child(2):checked ~ img:nth-child(3),
.container input[type="radio"]:nth-child(3):checked ~ img:nth-child(4),
.container input[type="radio"]:nth-child(4):checked ~ img:nth-child(5),
.container input[type="radio"]:nth-child(5):checked ~ img:nth-child(1){
    opacity: 1;
}

.container input[type="radio"]:nth-child(1):checked ~ img:nth-child(1),
.container input[type="radio"]:nth-child(2):checked ~ img:nth-child(2),
.container input[type="radio"]:nth-child(3):checked ~ img:nth-child(3),
.container input[type="radio"]:nth-child(4):checked ~ img:nth-child(4),
.container input[type="radio"]:nth-child(5):checked ~ img:nth-child(5){
    opacity: 0;
} 

代码解释：

首先，我们把所有的图片放到.container中，并将它设置为相对定位，以便图片绝对定位时可以参照它的位置。我们给图片设置了一个透明度，初值为0，也就是看不见。

然后，我们在.container里面添加了五个radio按钮。这些按钮是用来控制图片的切换的。我们通过nth-child选择器来控制被选中的radio按钮对应的图片的透明度为1，其他的图片透明度为0。我们使用了CSS3的过渡效果来让图片切换更加流畅。

通过这些代码，我们就可以实现一个简单的图片轮播了。