css3点击伸缩代码

在HTML和CSS中，以前的网页要实现点击伸缩效果，需要使用JavaScript来完成。但随着CSS3的出现，我们可以使用一些新的属性来实现这个效果，而无需编写大量的JavaScript代码。下面是一段CSS3的点击伸缩代码:

.wrapper {
    width: 200px;
    height: 150px;
    background-color: #ccc;
    overflow: hidden;
    transition: height 0.5s ease;
}
.wrapper.active {
    height: 300px;
}
.btn {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
}
.btn:hover {
    background-color: #444;
}
    

这段代码中，首先我们定义了一个容器wrapper，并设置了它的宽度、高度和背景颜色，同时使用了overflow: hidden属性将超出容器部分的内容隐藏起来。然后我们定义了一个.btn按钮，用来触发伸缩效果。

接着，使用了CSS3的transition属性，将height这个属性在0.5秒内变化完成，设置了一个缓动函数，让效果更加平滑。在.wrapper.active样式中，我们将height属性的值扩大到300px，实现了点击伸缩效果。

最后，在.btn样式中，我们设置了一些按钮的基本样式，并使用了:hover伪类，让按钮在鼠标移入时变换颜色，提升用户体验。

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