提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
通过html+css实现折叠样式
一、实现思路
动态修改元素的高度,并添加过渡效果。
二、实现代码
html代码:
<div class="fold">
<div class="child0">选项一</div>
<div class="child1">选项11</div>
<div class="child1">选项22</div>
<div class="child1">选项33</div>
<div class="child1">选项44</div>
</div>
css代码
.fold{
width: 200px;
height: 51px;
transition: all 1s;
overflow: hidden;
text-align: center;
line-height: 50px;
background-color: transparent;
color: white;
border-radius: 5px;
}
.fold:hover{
height: 258px;
}
.child0{
width: 200px;
height: 50px;
background-color: #409eff;
border-radius: 5px;
}
.child1{
width: 200px;
height: 50px;
border-top: 1px solid white;
border-radius: 5px;
background-color: #409eff;
}