纯css制作幻灯片
纯CSS制作幻灯片的方法
关键思路
利用CSS动画和@keyframes实现自动轮播效果，通过隐藏其他幻灯片项并控制透明度或位置变化来切换内容。
基础HTML结构
<div class="slider">
<div class="slide active">幻灯片1内容</div>
<div class="slide">幻灯片2内容</div>
<div class="slide">幻灯片3内容</div>
</div>核心CSS实现
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}自动轮播动画
通过@keyframes控制幻灯片切换：
@keyframes slide {
0% { opacity: 0; }
10% { opacity: 1; }
33% { opacity: 1; }
43% { opacity: 0; }
100% { opacity: 0; }
}
.slide:nth-child(1) { animation: slide 9s infinite; }
.slide:nth-child(2) { animation: slide 9s infinite 3s; }
.slide:nth-child(3) { animation: slide 9s infinite 6s; }响应式调整
建议添加媒体查询适应不同屏幕：
@media (max-width: 768px) {
.slider { height: 200px; }
}注意事项
- 动画时长需根据幻灯片数量调整（总时长=单页显示时间×页数）
- 确保所有幻灯片使用相同尺寸
- 如需手动控制需配合
:target伪类或复选框hack技术
进阶技巧
使用transform实现滑动效果：
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}这种方法无需JavaScript，适合简单展示场景，但交互功能有限。如需复杂控制建议结合JavaScript实现。
