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