css3 高从0变高

CSS3高从0变高

/* CSS代码 */.box {
    width: 100px;
    background-color: #f90;
    transition: height 1s ease-out;
    overflow: hidden;
}
.box:hover {
    height: 200px;
}
    

当我们使用CSS3的过渡效果来实现高度从0到自动增高的动画时，我们可能会遇到一个问题：动画开始和结束时，元素的高度都是确定的，所以我们无法纯粹地将高度从0开始过渡到自动高度。同时我们也不能使用固定的值作为元素高度，因为这样就无法适应各种长度的内容。

这时我们可以采用一个小技巧：使用溢出隐藏属性，将元素高度设为0，并使用过渡效果使动画平滑。然后，当鼠标悬停在元素上时，我们再将溢出隐藏属性取消并设置元素高度为需要的高度，这样在过渡时就会从0开始自然增高。

在上面的代码中，我们使用了一个具有黄色背景色的盒子作为示例，并将其初始高度设为0，并在过渡属性中设置了一个过渡动画。当鼠标悬停在盒子上时，我们将其高度设置为200px，因此，当运行动画时，它将逐渐从0增加到200px，给人一种盒子在打开的感觉。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！