css点击放大全屏

在网站设计中，常常会遇到需要点击图片或元素后放大到全屏的效果。这时候我们可以使用CSS来实现这个功能。下面我们就来介绍一下CSS点击放大全屏的实现方法。

/* HTML代码 */
<div class="box">
  <img src="图片地址" alt="图片描述">
</div>
/* CSS代码 */
.box {
  position: relative;
  overflow: hidden;
}
.box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}
.box img.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translate(0);
  cursor: zoom-out;
}
.box:hover img {
  transform: scale(1.1);
  cursor: pointer;
}
.box:hover img.fullscreen {
  transform: scale(1);
}
 

首先，我们需要在HTML中添加一个包含图片的div容器，在CSS中将其设置为“相对定位”和“超出隐藏”。接着，我们在图片上设置为绝对定位，并将其放置于容器中央。此时我们还不需要为图片设置全屏样式，因为全屏样式会覆盖在相对定位的容器上，导致鼠标点击失效。

接下来，我们为图片添加hover事件，当鼠标悬停在其上时，将其放大1.1倍，并将鼠标光标设置为手势。同时我们也为图片添加了“fullscreen”类，这会在后面鼠标点击时起到关键作用。

最后，我们为图片绑定一个点击事件。当图片被点击时，我们为其添加“fullscreen”类，并将其设置为“绝对定位”，宽高为100%并且覆盖全屏。我们同时设置其样式为translate(0)，这会将其放置于浏览器页面的左上角。此时我们也需要修改光标样式为缩小手势。

至此，CSS点击放大全屏的效果已经实现了。在使用中，我们只需要将图片地址和描述添加到HTML中，并正确引入CSS文件即可。此外，我们也可以根据需求进行样式的调整，比如动画时间、放大倍数等。希望本文对您有所帮助。