层叠图片轮播是网页开发中常用的一种特效，在不使用JavaScript的情况下，我们可以使用纯CSS来实现。下面我们来介绍一下如何使用纯CSS实现层叠图片轮播效果。

首先，我们需要一组图片，并使用HTML标签将其包裹起来。然后，我们需要使用CSS将这些图片进行居中排列。

<div class="slider-wrapper">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<style>
.slider-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 500px; /* 设置图片容器高度 */
}
img {
position: absolute; /* 将所有图片定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; /* 居中排列 */
opacity: 0; /* 初始时所有图片透明度为0 */
}
</style>

接着，我们需要创建动画效果，使得图片能够逐渐地展示出来。我们通过在CSS中设置keyframes（关键帧）来实现这个效果。

<style>
.slider-wrapper {
position: relative; /* 将图片容器定位 */
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
/* 设置第一张图片的初始透明度为1 */
img:first-child {
animation: fadeIn 1s ease forwards;
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 设置图片间隔时间 */
img {
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* 设置第二张及之后图片的显示效果 */
img:nth-child(2) {
animation-delay: 1s;
}
img:nth-child(3) {
animation-delay: 2s;
}
</style>

以上这段代码中，我们分别对第一张图片和第二张及之后的图片进行了不同的设置，其中动画的时间间隔为4秒，由于图片数量的不同，我们需要对每张图片的动画延迟时间进行不同的设置，使得图片能够逐渐展示出来。

通过以上的设置，我们便成功地实现了纯CSS的层叠图片轮播效果。