css3制作轮播图
CSS3制作轮播图的方法
使用纯CSS3制作轮播图可以通过动画和关键帧实现，无需JavaScript。以下是实现步骤：
HTML结构
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>CSS样式
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
animation: slide 12s infinite;
opacity: 0;
}
.slide1 {
background: red;
animation-delay: 0s;
}
.slide2 {
background: green;
animation-delay: 4s;
}
.slide3 {
background: blue;
animation-delay: 8s;
}
@keyframes slide {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
33% {
opacity: 1;
}
43% {
opacity: 0;
}
100% {
opacity: 0;
}
}实现原理
通过CSS3的@keyframes定义动画，控制每张幻灯片的透明度变化。设置不同的animation-delay实现顺序播放效果。
overflow: hidden确保容器外内容不可见，position: absolute让幻灯片重叠在一起。动画时间分配为每个幻灯片显示4秒（33%的12秒总时长）。
响应式调整
为适应不同屏幕尺寸，可以添加媒体查询：
@media (max-width: 768px) {
.slider {
width: 100%;
height: 150px;
}
}自动无限循环
通过设置animation-iteration-count: infinite实现无限循环播放。调整@keyframes中的百分比可以改变切换速度和停留时间。
这种方法适合简单的展示需求，如需交互功能（如手动切换）则需要结合JavaScript实现。
