因为专注,所以专业
2005 - 2020

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

时间:2020-02-06 03:43:40    作者:八叔模板堂
<style type="text/css">
.el{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
    -webkit-transform: max-height 1s;
    background-color: #666;
}
:checked ~.el{
    max-height:800px; /*足够内容的高度*/
}
#check ~label:before{
	content:"展开";
	display: inline-block;
}
:checked ~label:before{
	content:"收缩" !important;
}
</style>
<input id="check" type="checkbox"><label for="check"></label>
<div class="el">
     <div class="box" style="width: 100%;">
     	这<br/><br/>是<br/><br/>内<br/><br/>容<br/><br/>哦<br/><br/>
     </div>
</div>
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部