[分享]css3地面塌陷

CSS3是一种强大的样式表语言，可以为网页提供丰富的交互效果和视觉效果。其中的一个功能是实现地面塌陷的效果。/ 定义一个容器 / .container { : relative; width: 300...

CSS3是一种强大的样式表语言，可以为网页提供丰富的交互效果和视觉效果。其中的一个功能是实现地面塌陷的效果。

/* 定义一个容器 */
.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  overflow: hidden;
}

/* 定义一个可以被塌陷的元素 */
.box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #333;
  transform-origin: bottom center;
  transition: transform 0.5s ease;
}

/* 如果元素被悬停，那么应该触发“塌陷”效果 */
.box:hover {
  transform: scaleY(0.1);
} 

在上面的代码中，我们首先定义了一个容器，它拥有固定的宽度和高度，并且具有一个特定的背景颜色。然后，我们定义了一个可以被塌陷的元素，它在容器底部，拥有一个固定的高度。

最后，我们使用CSS3的transform属性来定义“塌陷”效果，这个效果在元素悬停时会触发。这里我们使用了transform-origin属性来声明旋转的原点是底部中心。我们还使用了transition属性，来使元素的塌陷过程更加平滑。

通过这样简单的CSS3代码，可以实现一个具有巨大视觉效果的网页元素。当用户悬停在这个元素上时，它就像一个坑洞一样迅速打开，让用户产生强烈的视觉冲击感。