css伸缩列表 |img css高度

英飞凌CSS应用，css-jquery教学，css外边框宽度代码，js文件包含css文件，css3蒙版运动，css cap是什么意思，img css高度 css伸缩列表 |img css高度

父节点1子节点1
子节点2
子节点3
父节点2子节点4
子节点5
父节点3子节点6
子节点7
子节点8
子节点9ul {
list-style: none;
padding: 0;
}
li {
position: relative;
padding-left: 20px;
cursor: pointer;
}
li:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
transition: all .3s ease;
}
li.active:before {
transform: translateY(-50%) rotate(90deg);
background-color: #333;
}
ul ul {
max-height: 0;
overflow: hidden;
transition: all .3s ease;
}
li.active >ul {
max-height: 1000px;
}

以上代码中大家使用了伪元素:before和CSS3中的transition属性，通过旋转和变化背景颜色来实现伸缩效果。当鼠标点击父级节点时，大家使用JavaScript为其添加active，来触发伸缩效果。

总之，CSS伸缩列表是一种非常实用的列表样式，可以为网站设计带来更好的视觉效果。大家只需要灵活运用CSS中的伪元素和过渡效果，就可以轻松地实现想要的效果。