您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關純CSS3如何實現(xiàn)移動端展開和收起效果的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
展示效果:
HTML代碼
<section class="block"> <input type="checkbox"> <div class="case-block"> <div>展開</div> <div>收起</div> </div> <div class="detail"> <div>唧唧復唧唧,木蘭當戶織。不聞機杼聲,惟聞女嘆息。(惟聞 通:唯)問女何所思,問女何所憶。女亦無所思,女亦無所憶。昨夜見軍帖,可汗大點兵,軍書十二卷,卷卷有爺名。阿爺無大兒,木蘭無長兄,愿為市鞍馬,從此替爺征。(惟聞 通:唯)</div> <div>東市買駿馬,西市買鞍韉,南市買轡頭,北市買長鞭。旦辭爺娘去,暮宿黃河邊,不聞爺娘喚女聲,但聞黃河流水鳴濺濺。旦辭黃河去,暮至黑山頭,不聞爺娘喚女聲,但聞燕山胡騎鳴啾啾。</div> <div>萬里赴戎機,關山度若飛。朔氣傳金柝,寒光照鐵衣。將軍百戰(zhàn)死,壯士十年歸。</div> <div>歸來見天子,天子坐明堂。策勛十二轉(zhuǎn),賞賜百千強??珊箚査?,木蘭不用尚書郎,愿馳千里足,送兒還故鄉(xiāng)。(一作:愿借明駝千里足)</div> <div>爺娘聞女來,出郭相扶將;阿姊聞妹來,當戶理紅妝;小弟聞姊來,磨刀霍霍向豬羊。開我東閣門,坐我西閣床,脫我戰(zhà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; }
采用技術點:
CSS3中的伸縮盒布局Flexible Box Layout
CSS中的關系選擇符
CSS中的偽類選擇符
CSS中的屬性選擇符
感謝各位的閱讀!關于“純CSS3如何實現(xiàn)移動端展開和收起效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。