css中如何做到图片轮播 |cssd70

<div class="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
.carousel {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s;
}
.carousel img:nth-child(1) {
opacity: 1;
}
.carousel:hover img {
opacity: 0.5;
}
.carousel:hover img:nth-child(1) {
opacity: 1;
}
@keyframes carousel {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.carousel img:nth-child(1) {
animation: carousel 8s infinite;
}
.carousel img:nth-child(2) {
animation-delay: 2s;
animation: carousel 8s infinite;
}
.carousel img:nth-child(3) {
animation-delay: 4s;
animation: carousel 8s infinite;
}

在代码中，大家创建了一个包含三张图片的div，并将其设置为100%宽，300px高。大家设置其相对位置和隐藏溢出的方式隐藏其他两张图片。 图片会在hover状态下产生半透明的效果。

大家使用了animation和transition属性来实现轮播效果。 它使图片在8秒钟内变为半透明，然后消失，同时将下一张图片设置为完全透明，并通过animation-delay属性延迟2秒和4秒来增加多张图片之间的时间延迟。 果您想要更长的转换时间，可以将8秒更改为适合您的时间间隔。

通过使用CSS，您可以轻松创建出美观的效果来，可以通过更改CSS属性来改变它外观和效果。