css3制作轮播图
CSS3 制作轮播图的方法
使用纯 CSS3 动画
通过 @keyframes 和 animation 属性实现自动轮播效果。
HTML 结构需将图片包裹在容器中，并设置固定宽度和隐藏溢出。
<div class="slider">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</div>CSS 关键代码：
.slider {
width: 500px;
overflow: hidden;
}
.slides {
display: flex;
animation: slide 10s infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-500px); }
66% { transform: translateX(-1000px); }
100% { transform: translateX(0); }
}结合伪类实现交互
通过 :hover 暂停动画增强用户体验：
.slides:hover {
animation-play-state: paused;
}响应式适配
使用 calc() 动态计算宽度，适应不同屏幕尺寸：
.slider {
width: 100%;
max-width: 800px;
}
.slides img {
width: calc(100% / 3);
}指示器实现
通过伪元素和计数器添加分页标记：
.slider {
counter-reset: slide;
}
.slides img::after {
content: counter(slide);
counter-increment: slide;
position: absolute;
bottom: 10px;
}注意事项
- 图片数量变化时需调整
@keyframes中的百分比和位移值 - 考虑添加
will-change: transform优化动画性能 - 移动端需增加
touch-action属性防止手势冲突
以上方法无需 JavaScript，适合简单场景。如需复杂交互（如手动滑动），建议结合 JavaScript 实现。
