css3高度逐渐增加

CSS3中的height属性可以用来设置元素的高度，它可以是一个固定值，也可以是百分比值，还可以使用calc()函数计算一个值。不过今天我们要讨论的是另一个特性，那就是height属性支持逐渐增加的效果。

如果你使用过transition属性，你应该对height属性的逐渐增加不会感到陌生。我们只需要设置transition: height 0.5s ease-in-out;，就可以让元素的高度在0.5秒内逐渐增加，从而产生一种过渡效果。

.my-element {
  height: 0;
  transition: height 0.5s ease-in-out;
}

.my-element:hover {
  height: 100px;
} 

以上代码演示了当鼠标悬停在元素上时，它的高度会从0逐渐增加到100px的效果。注意，这里的height属性初始值设为0，这是让元素完全收起的办法之一，也是CSS3的新特性。

如果你不想使用transition属性，那么还可以使用@keyframes规则来实现逐渐增加的效果：

.my-element {
  animation: expand 0.5s;
}

@keyframes expand {
  from {height: 0;}
  to {height: 100px;}
} 

以上代码中，animation属性把名为expand的关键帧动画应用到元素上，@keyframes规则则定义了动画从height: 0逐渐增加到height: 100px的过程。这里没有使用ease-in-out缓动函数，但如果需要也可以使用。

总之，height属性的逐渐增加效果可以让网页变得更加生动，优雅。既可以使用transition属性，也可以使用@keyframes规则，具体取决于你的需要和偏好。