用css帮我写一个网页焦点图代码

好的，以下是一个简单的用 CSS 实现网页焦点图的示例代码。在这个示例中，我们使用了 `animation` 属性来实现轮播动画效果，同时使用了 `@keyframes` 规则来定义动画的过渡效果。

HTML 代码：

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS 代码：

.slider {
  display: flex;
  overflow: hidden;
  height: 400px;
  margin: 0 auto;
}

.slider img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

.slider img:nth-child(1) {
  animation: slide 12s infinite;
}

.slider img:nth-child(2) {
  animation: slide 12s infinite 3s;
}

.slider img:nth-child(3) {
  animation: slide 12s infinite 6s;
}

.slider img:nth-child(4) {
  animation: slide 12s infinite 9s;
}

这个代码会创建一个轮播图，其中包含了 4 个图片。图片会在 12 秒钟内进行一次循环播放。具体来说，第一张图片会从左向右滑动，直到第四张图片，然后重新开始。在滑动过程中，图片会有一个缓慢的渐变过程，使得切换效果更加平滑自然。

你可以将这个代码复制到一个 HTML 文件中，并将图片的 URL 替换为你自己的图片，就可以在浏览器中查看效果了。