制作css轮播图
CSS轮播图制作方法
纯CSS实现基础轮播
使用CSS动画和关键帧实现自动轮播效果。HTML结构需包含一个容器和多个轮播项。
<div class="carousel">
<div class="carousel-item">1</div>
<div class="carousel-item">2</div>
<div class="carousel-item">3</div>
</div>.carousel {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
animation: rotate 9s infinite;
opacity: 0;
}
.carousel-item:nth-child(1) { animation-delay: 0s; }
.carousel-item:nth-child(2) { animation-delay: 3s; }
.carousel-item:nth-child(3) { animation-delay: 6s; }
@keyframes rotate {
0%, 33% { opacity: 1; }
33.33%, 100% { opacity: 0; }
}交互式轮播实现
通过复选框或单选框实现用户控制的轮播效果。需为每个轮播项添加对应的输入控件。
<div class="carousel">
<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<div class="slides">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>.carousel {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.slides {
display: flex;
width: 300%;
transition: transform 0.5s;
}
#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-33.33%); }
#slide3:checked ~ .slides { transform: translateX(-66.66%); }响应式设计适配
使用视窗单位和媒体查询确保轮播在不同设备上正常显示。
.carousel {
width: 90vw;
max-width: 600px;
height: 56.25vw;
max-height: 400px;
}
@media (min-width: 768px) {
.carousel {
height: 50vh;
}
}性能优化技巧
避免使用可能引起重排的属性，优化动画性能。
.carousel-item {
will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
}
@keyframes rotate {
0%, 33% {
opacity: 1;
transform: translateZ(0);
}
33.33%, 100% {
opacity: 0;
transform: translateZ(-100px);
}
}无障碍访问增强
添加ARIA属性和键盘导航支持，提升可访问性。
<div class="carousel" role="region" aria-label="Image carousel">
<div class="carousel-item" aria-hidden="false">...</div>
</div>.carousel-item:focus {
outline: 2px solid #0066cc;
}
