纯CSS3完成挪动端进行和收见效果的示例编码

日期:2021-02-27 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

本文详细介绍了纯CSS3完成挪动端进行和收见效果的示例编码,共享给大伙儿,实际以下:

展现实际效果:

HTML编码

<section class="block">
    <input type="checkbox">
    <div class="case-block">
      <div>进行</div>
      <div>收起</div>
    </div>
    <div class="detail">
      <div>唧唧复唧唧,木兰当户织。不闻心裁声,惟闻女哀叹。(惟闻 通:唯)问女何所思,问女何所忆。女亦没有思,女亦没有忆。昨夜见军帖,可汗大点兵,军书102卷,卷卷有爷名。阿爷无大儿,木兰无长兄,愿为市鞍马,从此替爷征。(惟闻
        通:唯)</div>
      <div>东市买马儿,西市买鞍鞯,南市买辔头,北市买长鞭。旦辞爷娘去,暮宿黄小河边,不闻爷娘唤女声,但闻黄河流水鸣溅溅。旦辞黄河去,暮至梅河口头,不闻爷娘唤女声,但闻燕山胡骑鸣啾啾。</div>
      <div>千万里赴戎机,关山度若飞。朔气传金柝,寒芒照铁衣。大将百战死,将士10年归。</div>
      <div>回归见君王,君王坐明堂。策勋102转,赐予百千强。可汗问所欲,木兰无需尚书郎,愿驰千里足,送儿还家乡。(1作:愿借明驼千里足)</div>
      <div>爷娘闻女来,出郭相扶将;阿姊闻妹来,当户理红妆;小弟闻姊来,磨刀霍霍向猪羊。开我东阁门,坐我西阁床,脱我战时袍,著我旧时裳。当窗理云鬓,对镜帖花黄。出门看伙伴,伙伴皆惊忙:同行业102年,不知道木兰是女郎。(帖
      通:贴;惊忙1作:惶;惶 伙伴 通:伙)</div>
     <div>雄兔脚扑朔,雌兔眼迷离;双兔傍地走,安能辨我是雄雌?</div>
    </div>
  </section>

CSS编码

@charset "UTF⑻";

.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: ⑵4px 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完成挪动端进行和收见效果的示例编码的文章内容就详细介绍到这了,更多有关CSS3挪动端进行和收见效果內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:CSS3完成淘宝留白的方式 返回下一篇:没有了