css中实现焦点图切换

焦点图切换是网页设计中常见的功能之一，可以让页面变得更加生动和有趣。使用CSS实现焦点图切换也是一种简单有效的方法。

 <div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>

  <style>
    .slider {
      display: flex;
      overflow: hidden;
      width: 100%;
      height: 300px;
    }
    .slider img {
      flex: 1;
      transition: transform 0.5s ease-in-out;
    }
    .slider img:focus {
      transform: scale(1.1);
    }
  </style> 

上述代码中，我们首先通过HTML代码创建了一个包含多个图片的div容器，然后使用CSS将其设置为flex布局，实现图片的横向排列。接着，我们对每个图片添加了transition属性，实现图片放大效果。最后，在图片获取焦点的时候，我们使用:focus选择器对其进行缩放，同时添加了一个过渡效果，使得切换过程更加平滑。