css 如何点击一张图片放大缩小

CSS是网页设计中经常使用的一项技术，它可以让我们实现一些很酷的效果，比如点击一张图片放大缩小。下面我们来学习一下这个效果的实现。

/* 定义图片容器样式 */.img-container {
      position: relative;
      width: 300px;
      height: 200px;
}
/* 定义图片样式 */.img-container img {
      width: 100%;
      height: 100%;
}
/* 定义放大镜样式 */.magnify {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid #fff;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all .5s ease-out;
}
/* 鼠标移入图片容器时显示放大镜 */.img-container:hover .magnify {
      opacity: .5;
}
/* 定义鼠标移动时放大镜的样式 */.img-container:hover .magnify:hover {
      opacity: .8;
      transform: scale(2);
      z-index: 99;
}
    

以上代码中，我们首先为图片容器定义了一个相对定位，然后设置容器的宽度和高度。接着我们定义了图片的样式，让图片宽度和高度都为100%。

然后就是关键的部分了，我们在容器内添加一个圆形的放大镜，并设置它为绝对定位。在鼠标移入容器时，我们让放大镜显示出来，并设置透明度为0.5。当鼠标移动到放大镜上时，我们让放大镜透明度变为0.8，并缩放为原来的两倍，提高层级（z-index）。这样就实现了点击图片放大缩小的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！