css图片轮播凸出 |css中的dd是

/* CSS代码 */
.slider{
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slider ul{
height: 400px;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.slider ul li{
width: 100%;
height: 400px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
transition: opacity 1.5s ease-in-out;
}
.slider ul li.active{
opacity: 1;
z-index: 2;
}
.slider ul li.slideLeft{
left: -100%;
opacity: 0;
z-index: 1;
}
.slider ul li.slideRight{
left: 100%;
opacity: 0;
z-index: 1;
}
.slider ul li.slideLeft.active,
.slider ul li.slideRight.active{
opacity: 1;
z-index: 2;
}
.slider ul li .slider-text{
position: absolute;
bottom: 20px;
left: 20px;
width: 400px;
max-width: 50%;
background: rgba(255, 255, 255, .7);
padding: 20px;
border-radius: 5px;
transform: translateY(50%);
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider ul li.active .slider-text{
opacity: 1;
}
.slider ul li img{
width: 100%;
height: 400px;
object-fit: cover;
}
.slider-nav{
position: absolute;
bottom: 20px;
right: 20px;
z-index: 3;
display: flex;
}
.slider-nav button{
width: 20px;
height: 20px;
border: none;
background: rgba(255, 255, 255, .5);
margin-right: 10px;
border-radius: 50%;
cursor: pointer;
transition: background .3s ease-in-out;
}
.slider-nav button:last-child{
margin-right: 0;
}
.slider-nav button:hover,
.slider-nav button.active{
background: #007bff;
}

上面的代码中，大家使用了一些CSS动画属性，如opacity、transition等，以及flex布局和伪类的使用。通过这些细节调整，才能使图片轮播更流畅美观。

如果想让图片轮播更加突出，可以考虑在文字上做文章。在这个例子中，大家设置了一个半透明的白色背景，在底部留出一部分空白，并使用translate实现上移效果，为轮播图片添加了文字介绍。这样既能提示图片内容，又不会使整个展示过于单调。