css如何制作轮播
CSS 轮播制作方法
使用纯 CSS 制作轮播可以通过动画和关键帧实现，以下是具体实现步骤：
HTML 结构
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">Slide 1</div>
<div class="carousel-item">Slide 2</div>
<div class="carousel-item">Slide 3</div>
</div>
</div>CSS 样式
.carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
width: 300%; /* 3 slides */
animation: slide 10s infinite;
}
.carousel-item {
width: 33.33%;
padding: 20px;
box-sizing: border-box;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-33.33%); }
66% { transform: translateX(-66.66%); }
100% { transform: translateX(0); }
}添加导航指示器
可以通过伪元素或额外元素添加导航点：
.carousel::after {
content: "";
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.carousel::after {
content: "•••";
letter-spacing: 5px;
animation: dot 10s infinite;
}
@keyframes dot {
0%, 33% { opacity: 1; }
34%, 100% { opacity: 0.5; }
}响应式调整
针对不同屏幕尺寸调整轮播样式：
@media (max-width: 768px) {
.carousel-inner {
width: 500%; /* 调整幻灯片数量 */
}
.carousel-item {
width: 20%;
}
@keyframes slide {
/* 更新关键帧百分比 */
}
}暂停动画交互
添加悬停暂停功能：
.carousel:hover .carousel-inner {
animation-play-state: paused;
}自动无限循环
确保动画无缝衔接：
.carousel-inner {
animation: slide 10s infinite linear;
}这种方法无需 JavaScript，适合简单展示需求。如需更复杂交互（如手动导航），建议结合 JavaScript 实现。
