css 制作焦点图

2026-02-13 10:18:26CSS

使用CSS制作焦点图

焦点图（轮播图）是网页常见的交互元素，以下是纯CSS实现的几种方法：

方法一：基于CSS动画的轮播

HTML结构

<div class="slider">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS样式

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

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

.slide {
  width: 33.33%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

@keyframes slide {
  0%, 30% { transform: translateX(0); }
  33%, 63% { transform: translateX(-33.33%); }
  66%, 96% { transform: translateX(-66.66%); }
}

方法二：使用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">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>

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

CSS样式

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

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

.slide {
  width: 33.33%;
  height: 300px;
}

#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-33.33%); }
#slide3:checked ~ .slides { transform: translateX(-66.66%); }

.controls label {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

input[type="radio"] { display: none; }

方法三：hover暂停动画

在方法一基础上添加：

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

增强建议

响应式设计
使用百分比宽度和@media查询适配不同屏幕尺寸：

.slide {
  width: 100%;
}
@media (min-width: 768px) {
  .slide { width: 50%; }
}

过渡效果
为切换添加缓动效果：

.slides {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

指示器样式
美化导航点：

css 制作焦点图

.controls label {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  transition: background 0.3s;
}
.controls label:hover {
  background: white;
}

注意：纯CSS方案适合简单场景，复杂交互建议结合JavaScript实现。