css焦点图制作

CSS焦点图制作方法

使用纯CSS制作焦点图可以通过动画和过渡效果实现轮播展示。以下是一个基础的实现方案：

HTML结构

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

CSS样式

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

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

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

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

增强交互性版本

添加导航点和悬停暂停功能：

HTML添加导航

<div class="slider-nav">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS添加交互

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

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

.dot.active {
  background: #333;
}

响应式处理

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {
  .slide {
    height: 200px;
  }

  .slides {
    animation-duration: 8s;
  }
}

注意事项

• 确保为不支持CSS动画的浏览器提供回退方案
• 图片内容应预先优化大小以提高加载性能
• 考虑添加触摸事件支持以提升移动端体验
• 可通过调整animation-timing-function改变切换效果

这种方法无需JavaScript即可实现基础轮播功能，适合简单展示需求。如需更复杂交互，建议结合JavaScript实现。