css树形过渡展开 |css文件提取

.tree {
list-style: none;
margin-left: 20px;
padding-left: 20px;
}
.tree li {
position: relative;
margin-left: -20px;
padding-left: 20px;
}
.tree li:before {
position: absolute;
top: 0;
left: -20px;
content: "";
width: 20px;
height: 100%;
border-left: 1px solid #ccc;
}
.tree li:after {
position: absolute;
top: 0;
left: -20px;
content: "";
width: 10px;
height: 100%;
border-left: 1px solid #ccc;
transform: translateX(-8px);
}
.tree li:last-child:before {
height: 50%;
}
.tree li:last-child:after {
height: 50%;
}
.tree li.has-children >span {
cursor: pointer;
}
.tree li.has-children >ul {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}
.tree li.has-children.open >ul {
max-height: 1000px;
}

以上代码使用了伪元素:before和:after对树形节点进行了线条的绘制，使用了max-height属性和overflow:hidden属性实现了树形节点的展开和折叠效果，使用了transition属性控制过渡时间。
在使用中，可以给需要展开的树形节点添加class，使用JavaScript来监听用户事件并动态添加或删除class，从而实现树形节点的展开和折叠效果。