css制作照片轮播
基础轮播结构
使用HTML创建轮播容器和图片元素，CSS设置基本样式。轮播容器需设置overflow: hidden隐藏超出部分，内部图片列表使用display: flex横向排列。
<div class="carousel">
<div class="carousel-inner">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</div>.carousel {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel img {
width: 600px;
height: 400px;
object-fit: cover;
flex-shrink: 0;
}自动轮播动画
通过CSS关键帧动画实现自动轮播效果。计算图片数量后设置动画时长和位移距离，注意动画需无限循环。
.carousel-inner {
animation: slide 12s infinite;
}
@keyframes slide {
0%, 20% { transform: translateX(0); }
33.33%, 53.33% { transform: translateX(-100%); }
66.66%, 86.66% { transform: translateX(-200%); }
100% { transform: translateX(0); }
}导航指示器
添加小圆点指示当前显示图片。使用伪元素或单独元素创建，通过CSS定位固定在轮播底部。
<div class="carousel-indicators">
<span class="active"></span>
<span></span>
<span></span>
</div>.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.carousel-indicators span {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
}
.carousel-indicators .active {
background: white;
}悬停暂停效果
通过CSS伪类实现鼠标悬停时暂停动画，增强用户体验。注意需同时控制指示器状态。
.carousel:hover .carousel-inner {
animation-play-state: paused;
}响应式适配
使用媒体查询调整轮播尺寸，确保在不同设备上正常显示。图片比例建议保持16:9或4:3。
@media (max-width: 768px) {
.carousel, .carousel img {
width: 100%;
height: 300px;
}
}过渡效果增强
为图片切换添加渐变或缩放效果，通过CSS滤镜和过渡属性实现视觉优化。
.carousel img {
transition: opacity 0.5s, transform 0.5s;
}
.carousel-inner:hover img:not(:hover) {
opacity: 0.8;
transform: scale(0.98);
}
