[分享]css3放大特效代码

CSS3是一种可用于设计网页的强大语言，可实现许多有趣和吸引人的效果，其中包括放大特效。下面是一些关于CSS3放大特效的代码示例：/ HTML代码 / / CSS代码 / .box { : re...

CSS3是一种可用于设计网页的强大语言，可实现许多有趣和吸引人的效果，其中包括放大特效。下面是一些关于CSS3放大特效的代码示例：

/* HTML代码 */
<div class="box">
  <img src="image.jpg">
</div>

/* CSS代码 */
.box {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

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

此代码使用了一个div容器和一个img标记。容器使用相对定位和内联块显示，从而使其可以呈现出正方形的形状。利用:before伪类添加了一个 padding-top等于100%的全屏DIV来保持容器的宽高比，这样容器就可以扩展到它的父元素宽度，同时保持正方形外观。 图像的位置使用绝对定位，宽度和高度都设置为100%，以占据容器中的全部空间。当鼠标悬停在图像上方时，使用CSS3 transform属性将其放大。 使用transition属性提供动画效果。可以更改transition代码以使放大或缩小更快或更慢。