通过HTML+CSS实现折叠样式完整代码
发布时间：2023-04-03 16:32:27 作者：如人饮氺 
我要评论
我要评论这篇文章主要介绍了通过HTML+CSS实现折叠样式完整代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
通过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;
}
三、效果
到此这篇关于通过HTML+CSS实现折叠样式完整代码的文章就介绍到这了,更多相关css折叠样式内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
今天教大家用纯css实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和标签页差不多，逻辑上都是一种单选面板，只不过折叠菜单一般是垂直堆叠的，标签页是横着排2021-10-26
这篇文章主要介绍了CSS 实现 图片鼠标悬停折叠效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-21- 这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-27
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下2018-10-30- 这篇文章主要介绍了纯CSS实现可折叠树状菜单，不用js让你体会到css的强大,需要的朋友可以参考下2018-04-17
最新评论