这篇文章给大家分享的是有关纯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中的伸缩盒布局Flexible Box Layout
CSS中的关系选择符
CSS中的伪类选择符
CSS中的属性选择符
感谢各位的阅读!关于“纯CSS3如何实现移动端展开和收起效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!