本文介紹了純CSS3實現移動端展開和收起效果的示例代碼，分享給大家，具體如下：

展示效果：

HTML代碼

展開收起唧唧復唧唧，木蘭當戶織。不聞機杼聲，惟聞女嘆息。(惟聞 通：唯)問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。(惟聞

通：唯)

東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。(一作：愿借明駝千里足)爺娘聞女來，出郭相扶將；阿姊聞妹來，當戶理紅妝；小弟聞姊來，磨刀霍霍向豬羊。開我東閣門，坐我西閣床，脫我戰時袍，著我舊時裳。當窗理云鬢，對鏡帖花黃。出門看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。(帖

通：貼；驚忙一作：惶；惶 火伴 通：伙)

雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？

CSS代碼

@charset "UTF-8";

.title-block {

height: 26px;

text-align: center;

}

.block {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: reverse;

-ms-flex-flow: column-reverse nowrap;

flex-flow: column-reverse nowrap;

width: 360px;

margin: 0 auto;

font-size: 14px;

color: #4C4C4C;

line-height: 28px;

border: 1px solid #999;

padding: 10px;

}

.block > .detail {

max-height: 163px;

margin-bottom: 10px;

overflow: hidden;

}

.block > .case-block {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

width: 120px;

height: 24px;

margin: 0 auto 0;

color: #0e0e0e;

background: #fff;

border: 1px solid #0e0e0e;

border-radius: 5px;

}

.block > .case-block div:nth-of-type(1) {

display: block;

}

.block > .case-block div:nth-of-type(2) {

display: none;

}

.block > [type="checkbox"] {

position: relative;

display: block;

width: 120px;

height: 24px;

margin: -24px auto 0;

z-index: 1000;

opacity: 0;

}

.block > [type="checkbox"]:hover + .case-block {

background-color: #f5f5f5;

}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(1) {

display: none;

}

.block > [type="checkbox"]:checked + .case-block div:nth-of-type(2) {

display: block;

}

.block > [type="checkbox"]:checked + .case-block + .detail {

max-height: inherit;

}

采用技術點：

CSS3中的伸縮盒布局Flexible Box Layout

CSS中的關系選擇符

CSS中的偽類選擇符

CSS中的屬性選擇符

到此這篇關于純CSS3實現移動端展開和收起效果的示例代碼的文章就介紹到這了,更多相關CSS3移動端展開和收起效果內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。