css制作轮播
使用纯CSS制作轮播图
轮播图可以通过CSS的animation和@keyframes实现自动切换效果，结合HTML结构完成基础功能。
HTML结构
<div class="carousel">
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
</div>CSS关键代码
.carousel {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
width: 300%; /* 根据幻灯片数量调整 */
animation: slide 10s infinite;
}
.slide {
width: 33.33%; /* 100% / 幻灯片数量 */
height: 300px;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-100%); }
66% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}添加导航指示器
通过伪元素或额外HTML元素创建轮播图指示点，配合:target选择器实现点击切换。
HTML增强
<div class="indicators">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
</div>CSS增强
.slides {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}
:target {
animation: none;
transform: translateX(var(--target-position));
}响应式轮播设计
使用CSS媒体查询确保不同设备上的显示效果：
@media (max-width: 768px) {
.slide {
height: 200px;
}
.slides {
animation-duration: 7s;
}
}交互动画增强
添加过渡效果使滑动更平滑：
.slides {
transition: transform 0.5s ease-in-out;
}
.slide {
transition: opacity 0.3s;
}注意事项
- 纯CSS轮播无法实现触摸滑动等复杂交互
- 幻灯片数量变化时需要重新计算宽度和关键帧百分比
- 考虑添加
prefers-reduced-motion媒体查询为动画敏感用户提供替代方案 - 对于生产环境，建议结合JavaScript实现更完整的控制功能
