欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純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)文章

最新評論