css箱子轮播图 |css中的auto

css n 1，css高度自动增加，css怎么兼容兼容模式，css 页面按比例缩放，js获取元素的css样式，css字符宽度一样，css中的auto css箱子轮播图 |css中的auto

这种箱子轮播图的实现方法相对来说较为简单，你可以使用以下代码启动它:

.container {
margin: 0 auto;
width: 400px;
height: 200px;
}
.slide {
display: none;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
animation: fade 1s linear infinite;
}
.slide:nth-child(1) { background-image: url('img/1.jpg'); }
.slide:nth-child(2) { background-image: url('img/2.jpg'); }
.slide:nth-child(3) { background-image: url('img/3.jpg'); }
@keyframes fade {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

这段代码定义了一个容器元素 .container，它包含其中的幻灯片项（.slide）。.slide 的高度和宽度都设置为 100%。因此，每张幻灯片都将充满容器。.slide 背景图片被定义在CSS中，可以将其更改为您想要的任何图片。

最后，当幻灯片包含的图片变换时，CSS将以从透明度为 0 的“淡入”开始展示和结束。keyframes调用了幻灯片的每个动画阶段，这个样式中定义“fade”轮询动画，以控制幻灯片在任何时间点上在用户屏幕上显示的方式。

总之，使用CSS箱子轮播图是一种简单而优美的展示您网站或网页内容的方式，代码也非常简单。如果您需要如此之类的特效，那么这个轮播图代码可以让您去实现它，也可以随心所欲地对其进行定制。