css3超美动效轮播图 |从中心背景径向渐变css

.carousel {
position: relative;
width: 100%;
height: 400px;
}
.carousel .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .6s ease-in-out;
}
.carousel .slide.active {
opacity: 1;
}
.carousel .slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel .indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.carousel .indicators li {
margin: 0 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: background-color .6s ease-in-out;
}
.carousel .indicators li.active {
background-color: #f00;
}

上面的代码中，大家定义了.carousel作为轮播图容器，在其中定义了每个.slide作为轮播项。大家给每个.slide添加了opacity属性，并设置其为0，以隐藏轮播项，并设置过渡效果，当添加.active类时，将opacity属性改为1，以实现淡入淡出效果。大家还给每个.slide添加了一个img元素，用于展示图片。最后，大家在.carousel中添加了一个.indicators元素，用于展示轮播图小圆点。

通过CSS3的过渡效果、动画及其众多属性的灵活应用，大家可以轻松实现超美的动效轮播图。快试试吧！