当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

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

教程管理员 发布于2023-10-04 08:29 HTML教程 237

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

前言

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

琼ICP备09004296号-12