当前位置：首页 > CSS

css 制作焦点图

2026-04-01 19:14:03CSS

使用纯CSS制作焦点图

焦点图（轮播图）通常需要HTML、CSS和JavaScript配合实现，但纯CSS方案也能通过动画和伪类实现基础效果。以下是两种常见方法：

方法一：利用CSS动画实现自动轮播

HTML结构

<div class="slider">
  <div class="slides">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
  </div>
</div>

CSS关键代码

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

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

.slide {
  width: 600px;
  height: 400px;
  flex-shrink: 0;
}

@keyframes slide {
  0%, 33% { transform: translateX(0); }
  33.01%, 66% { transform: translateX(-600px); }
  66.01%, 99.99% { transform: translateX(-1200px); }
}

方法二：利用radio input实现手动切换

HTML结构

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

  <div class="slides">
    <div class="slide" style="background: #f00;"></div>
    <div class="slide" style="background: #0f0;"></div>
    <div class="slide" style="background: #00f;"></div>
  </div>

  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

CSS关键代码

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s;
}

#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-600px); }
#slide3:checked ~ .slides { transform: translateX(-1200px); }

.controls label {
  position: absolute;
  bottom: 20px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

#slide1:checked ~ .controls label:nth-child(1),
#slide2:checked ~ .controls label:nth-child(2),
#slide3:checked ~ .controls label:nth-child(3) {
  background: white;
}

优化建议

响应式适配
使用百分比宽度和vw/vh单位替代固定像素值：
```
.slider {
  width: 90vw;
  height: 60vh;
}
```

过渡效果增强
添加transition-timing-function调整动画曲线：

.slides {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

无限循环优化
对于动画方案，通过调整关键帧百分比实现无缝衔接：

css 制作焦点图

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-600px); }
  66% { transform: translateX(-1200px); }
  100% { transform: translateX(0); }
}