css制作轮播代码

2026-04-02 11:27:25CSS

基础CSS轮播实现

使用纯CSS实现轮播图需要结合@keyframes动画和overflow: hidden属性。以下是一个基础示例：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Slide 1">
    <img src="image2.jpg" alt="Slide 2">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

.slider {
  width: 100%;
  max-width: 800px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slides {
  display: flex;
  width: 300%;
  animation: slide 12s infinite;
}

.slides img {
  width: 33.333%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-33.333%); }
  66% { transform: translateX(-66.666%); }
  100% { transform: translateX(0); }
}

使用CSS变量控制轮播

通过CSS变量可以更灵活地控制轮播效果：

css制作轮播代码

:root {
  --slide-count: 3;
  --slide-width: 100%;
  --animation-duration: 12s;
}

.slider {
  --container-width: var(--slide-width);
  width: var(--container-width);
}

.slides {
  width: calc(var(--slide-count) * 100%);
  animation: slide var(--animation-duration) infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% / var(--slide-count) * (var(--slide-count) - 1))); }
}

响应式轮播设计

添加媒体查询使轮播适应不同屏幕尺寸：

@media (max-width: 768px) {
  .slider {
    height: 300px;
  }

  :root {
    --animation-duration: 8s;
  }
}

@media (max-width: 480px) {
  .slider {
    height: 200px;
  }
}

添加导航指示器

使用伪元素创建轮播导航点：

css制作轮播代码

.slider::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.slider::after {
  content: '•••';
  letter-spacing: 10px;
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  animation: dots calc(var(--animation-duration) / var(--slide-count)) infinite;
}

@keyframes dots {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

悬停暂停效果

添加交互效果使轮播在鼠标悬停时暂停：

.slider:hover .slides {
  animation-play-state: paused;
}

无缝循环优化

改进动画使过渡更平滑：

.slides {
  animation: slide var(--animation-duration) infinite linear;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% * (var(--slide-count) - 1) / var(--slide-count))); }
}