利用css3怎样做移动端的展开收起效果？

发布时间：2023-08-04 13:55:57 所属栏目：语言来源：

导读：这篇文章主要介绍用css3实现内容展开收起的效果，对于点击展开和收起的效果我们之前也有了解过，而这篇分享的是移动端的实现，实现效果及代码如下，感兴趣的朋友就继续往下看吧。

HTML代码

<section class="

这篇文章主要介绍用css3实现内容展开收起的效果，对于点击展开和收起的效果我们之前也有了解过，而这篇分享的是移动端的实现，实现效果及代码如下，感兴趣的朋友就继续往下看吧。

HTML代码

<section class="block">

    <input type="checkbox">

    <div class="case-block">

      <div>展开</div>

      <div>收起</div>

    </div>

    <div class="detail">

      <div>唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。(惟闻通：唯)问女何所思，问女何所忆。女亦无所思，女亦无所忆。

        昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。(惟闻通：唯)</div>

      <div>东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。

        旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。</div>

      <div>万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。</div>

      <div>归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。

        (一作：愿借明驼千里足)</div>

      <div>爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，

        著我旧时裳。当窗理云鬓，对镜帖花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。（帖通：贴；惊忙一作：惶；

        惶火伴通：伙）</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中的属性选择符

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!