[分享]css3宽从下往上变

CSS3宽从下往上变是一种常见的网页设计效果，特别适合用在分段展示的文字内容或图片列表展示中，可以使网页更加美观、生动，吸引用户的眼球。/ CSS3中宽从下往上变的实现方法 / .box { : re...

CSS3宽从下往上变是一种常见的网页设计效果，特别适合用在分段展示的文字内容或图片列表展示中，可以使网页更加美观、生动，吸引用户的眼球。

/* CSS3中宽从下往上变的实现方法 */

.box {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.box:before {
  content: ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #000000, #ffffff);
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.box:hover:before {
  transform: translateY(0);
} 

以上代码中，我们通过:before伪元素实现了宽从下往上变的效果。首先，我们设置box元素的position属性为relative，overflow属性为hidden，使伪元素的运动范围在box元素内。然后，伪元素的定位设置为absolute，位置为底部左边，宽度和高度均为100%，并设置渐变效果的背景色。接着，我们使用translateY函数将伪元素从下向上移动100%的距离，即使它完全隐藏在box底部。最后，我们使用transition属性设置伪元素的运动效果，当鼠标悬停在box上时，伪元素将在0.5秒的时间内平滑地从下往上展开，实现宽度从下往上变。