纯css制作幻灯片
纯CSS制作幻灯片的方法
使用纯CSS制作幻灯片主要依赖CSS动画和关键帧（@keyframes）技术，结合HTML结构实现轮播效果。以下是两种常见的实现方式：
方法一：使用CSS动画和无限循环
HTML结构：
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>CSS样式：
.slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: slideShow 12s infinite;
}
.slide1 {
background: #ff9;
animation-delay: 0s;
}
.slide2 {
background: #9f9;
animation-delay: 4s;
}
.slide3 {
background: #99f;
animation-delay: 8s;
}
@keyframes slideShow {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}原理：通过@keyframes控制每张幻灯片的透明度变化，利用animation-delay错开播放时间，实现无限循环轮播。
方法二：使用:target伪类实现手动切换
HTML结构：
<div class="slider">
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>
<div class="nav">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
</div>
</div>CSS样式：
.slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slide:target {
opacity: 1;
}
.slide1 { background: #ff9; }
.slide2 { background: #9f9; }
.slide3 { background: #99f; }原理：通过锚点链接（#slide1等）触发:target伪类，配合过渡效果实现手动切换。
注意事项
- 幻灯片数量较多时，需调整动画时间和延迟参数。
- 方法一适合自动轮播，方法二适合交互式切换。
- 移动端需考虑添加触摸事件（需JavaScript配合，非纯CSS方案）。
