资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

纯CSS3如何实现移动端展开和收起效果

这篇文章给大家分享的是有关纯CSS3如何实现移动端展开和收起效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网站空间、营销软件、网站建设、绥棱网站维护、网站推广。

展示效果：

纯CSS3如何实现移动端展开和收起效果

纯CSS3如何实现移动端展开和收起效果

HTML代码


    
    
      
展开

      
收起

    
           
唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。(惟闻 通：唯)问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。(惟闻         通：唯)
      
东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。
      
万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。
      
归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。(一作：愿借明驼千里足)
      
爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜帖花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。（帖       通：贴；惊忙一作：惶；惶 火伴 通：伙）
     
雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？
    
  

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如何实现移动端展开和收起效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


文章名称：纯CSS3如何实现移动端展开和收起效果
网站链接：http://cdkjz.cn/article/ihcejp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都做手机网站成都网站排名成都响应式网站建设公司四川服务器托管成都网站建设什邡网站建设电商网站成都铺面装修成都网站营销工商财税

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图