通过HTML+CSS实现折叠样式完整代码

这篇文章主要介绍了通过HTML+CSS实现折叠样式完整代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言

通过html+css实现折叠样式

一、实现思路

动态修改元素的高度，并添加过渡效果。

二、实现代码

html代码：

  选项一
选项11
选项22
选项33
选项44

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; }