這篇文章給大家分享的是有關(guān)純CSS3如何實(shí)現(xiàn)移動(dòng)端展開(kāi)和收起效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)宛城,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):028-86922220

展示效果：

HTML代碼

<section class="block">
    <input type="checkbox">
    <div class="case-block">
      <div>展開(kāi)</div>
      <div>收起</div>
    </div>
    <div class="detail">
      <div>唧唧復(fù)唧唧，木蘭當(dāng)戶(hù)織。不聞機(jī)杼聲，惟聞女嘆息。(惟聞 通：唯)問(wèn)女何所思，問(wèn)女何所憶。女亦無(wú)所思，女亦無(wú)所憶。昨夜見(jiàn)軍帖，可汗大點(diǎn)兵，軍書(shū)十二卷，卷卷有爺名。阿爺無(wú)大兒，木蘭無(wú)長(zhǎng)兄，愿為市鞍馬，從此替爺征。(惟聞
        通：唯)</div>
      <div>東市買(mǎi)駿馬，西市買(mǎi)鞍韉，南市買(mǎi)轡頭，北市買(mǎi)長(zhǎng)鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。</div>
      <div>萬(wàn)里赴戎機(jī)，關(guān)山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰(zhàn)死，壯士十年歸。</div>
      <div>歸來(lái)見(jiàn)天子，天子坐明堂。策勛十二轉(zhuǎn)，賞賜百千強(qiáng)?？珊箚?wèn)所欲，木蘭不用尚書(shū)郎，愿馳千里足，送兒還故鄉(xiāng)。(一作：愿借明駝千里足)</div>
      <div>爺娘聞女來(lái)，出郭相扶將；阿姊聞妹來(lái)，當(dāng)戶(hù)理紅妝；小弟聞姊來(lái)，磨刀霍霍向豬羊。開(kāi)我東閣門(mén)，坐我西閣床，脫我戰(zhàn)時(shí)袍，著我舊時(shí)裳。當(dāng)窗理云鬢，對(duì)鏡帖花黃。出門(mén)看火伴，火伴皆驚忙：同行十二年，不知木蘭是女郎。（帖
      通：貼；驚忙一作：惶；惶 火伴 通：伙）</div>
     <div>雄兔腳撲朔，雌兔眼迷離；雙兔傍地走，安能辨我是雄雌？</div>
    </div>
  </section>

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

采用技術(shù)點(diǎn)：

• CSS3中的伸縮盒布局Flexible Box Layout

• CSS中的關(guān)系選擇符

• CSS中的偽類(lèi)選擇符

• CSS中的屬性選擇符

感謝各位的閱讀！關(guān)于“純CSS3如何實(shí)現(xiàn)移動(dòng)端展開(kāi)和收起效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱(chēng)：純CSS3如何實(shí)現(xiàn)移動(dòng)端展開(kāi)和收起效果-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://m.rwnh.cn/article14/poede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)