純CSS3實現(xiàn)移動端展開和收起效果的示例代碼
發(fā)布時間:2020-04-26 16:12:43 作者:提魯戰(zhàn)神
我要評論

這篇文章主要介紹了純CSS3實現(xiàn)移動端展開和收起效果的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
本文介紹了純CSS3實現(xiàn)移動端展開和收起效果的示例代碼,分享給大家,具體如下:
展示效果:
HTML代碼
<section class="block"> <input type="checkbox"> <div class="case-block"> <div>展開</div> <div>收起</div> </div> <div class="detail"> <div>唧唧復唧唧,木蘭當戶織。不聞機杼聲,惟聞女嘆息。(惟聞 通:唯)問女何所思,問女何所憶。女亦無所思,女亦無所憶。昨夜見軍帖,可汗大點兵,軍書十二卷,卷卷有爺名。阿爺無大兒,木蘭無長兄,愿為市鞍馬,從此替爺征。(惟聞 通:唯)</div> <div>東市買駿馬,西市買鞍韉,南市買轡頭,北市買長鞭。旦辭爺娘去,暮宿黃河邊,不聞爺娘喚女聲,但聞黃河流水鳴濺濺。旦辭黃河去,暮至黑山頭,不聞爺娘喚女聲,但聞燕山胡騎鳴啾啾。</div> <div>萬里赴戎機,關(guān)山度若飛。朔氣傳金柝,寒光照鐵衣。將軍百戰(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; }
采用技術(shù)點:
- CSS3中的伸縮盒布局Flexible Box Layout
- CSS中的關(guān)系選擇符
- CSS中的偽類選擇符
- CSS中的屬性選擇符
到此這篇關(guān)于純CSS3實現(xiàn)移動端展開和收起效果的示例代碼的文章就介紹到這了,更多相關(guān)CSS3移動端展開和收起效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- HTML 規(guī)范是 W3C 與 WHATWG 合作共同產(chǎn)出的,HTML5 因此也不例外,這篇文章主要介紹了HTML5給漢字加拼音收起展開組件的實現(xiàn)代碼,需要的朋友可以參考下2020-04-08
純CSS3實現(xiàn)炫酷圓形主菜單動畫展開收起特效源碼
純CSS3實現(xiàn)炫酷圓形主菜單動畫展開收起特效源碼是一款在鼠標經(jīng)過的時候,所有的子菜單會依次出現(xiàn),并以動畫的方式環(huán)繞在圓形主菜單周圍,當鼠標離開時動畫收縮效果。本段特2017-04-25- 這篇文章主要介紹了如何使用CSS3 實現(xiàn)側(cè)邊欄展開收起動畫,并附上了示例代碼,非常的詳細,推薦給需要的小伙伴。2014-12-22