[分享]css3放大后恢复

CSS3是一种前端技术，可以使用这种技术来放大图片。但是，当图片放大后，我们可能会想要恢复它的大小。这是一个非常有用的技巧，可以使得网站更加美观和互动性更加丰富。img { transition: t...

CSS3是一种前端技术，可以使用这种技术来放大图片。但是，当图片放大后，我们可能会想要恢复它的大小。这是一个非常有用的技巧，可以使得网站更加美观和互动性更加丰富。

img {
  transition: transform 0.5s ease;
}

img:hover {
  transform: scale(1.5);
} 

上面是一个简单的CSS代码片段，可以用来放大图像。首先，我们定义了一个过渡属性，这个属性将控制过渡的时间和方式，使得图像的放大效果更加平滑。然后，我们将鼠标悬停在图像上时，使用transform属性将图像放大1.5倍。

img.hoverable {
  transition: transform 0.5s ease;
}

img.hoverable:hover {
  transform: scale(1.5);
}

img.hoverable:hover:after {
  content: "Click to Zoom Out";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  font-size: 0.8em;
  border-radius: 3px;
}

img.hoverable.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  cursor: zoom-out;
}

img.hoverable.zoomed:hover {
  cursor: default;
}

img.hoverable.zoomed:after {
  content: "Click to Zoom In";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  font-size: 0.8em;
  border-radius: 3px;
} 

这段代码扩展了前一个代码。我们添加了一个额外的类名"hoverable"到我们的图像上。我们使用:after伪元素添加了一个文本提示，让用户知道他们可以使用鼠标点击来缩小图像。当用户点击图像时，我们使用一个.zoomed类名来缩小图像的大小，同时添加类名.zoomed的一些CSS定义可以使图像填充整个窗口，让用户能够完全看到图像的细节。当用户再次点击图像时，它就会缩小回到原来的大小。

在CSS3中，使用这样的技术可以增加网站的交互性和美观性。我们可以使用这两个代码片段来改善我们的网站，使它们更具吸引力，并引导用户与内容互动。