通過HTML+CSS實現(xiàn)折疊樣式完整代碼
發(fā)布時間：2023-04-03 16:32:27 作者：如人飲氺 
我要評論
我要評論這篇文章主要介紹了通過HTML+CSS實現(xiàn)折疊樣式完整代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
通過html+css實現(xiàn)折疊樣式
一、實現(xiàn)思路
動態(tài)修改元素的高度，并添加過渡效果。
二、實現(xiàn)代碼
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實現(xiàn)折疊樣式完整代碼的文章就介紹到這了,更多相關css折疊樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
今天教大家用純css實現(xiàn)一個單選的折疊菜單，不需要JavaScript就能用。折疊菜單和標簽頁差不多，邏輯上都是一種單選面板，只不過折疊菜單一般是垂直堆疊的，標簽頁是橫著排2021-10-26
這篇文章主要介紹了CSS 實現(xiàn) 圖片鼠標懸停折疊效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-21- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30- 這篇文章主要介紹了純CSS實現(xiàn)可折疊樹狀菜單，不用js讓你體會到css的強大,需要的朋友可以參考下2018-04-17
