纯CSS3实现移动端展开和收起效果的示例代码


Posted in HTML / CSS onApril 26, 2020

本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下:

展示效果:

纯CSS3实现移动端展开和收起效果的示例代码

纯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中的属性选择符

到此这篇关于纯CSS3实现移动端展开和收起效果的示例代码的文章就介绍到这了,更多相关CSS3移动端展开和收起效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
CSS实现聊天气泡效果
Apr 26 #HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
Javascript注入技巧
2007/06/22 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
javascript每日必学之封装
2016/02/23 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python中对数据进行各种排序的方法
2019/07/02 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
结构和类有什么异同
2012/07/16 面试题
运动会通讯稿200字
2014/02/16 职场文书
仙境之桥观后感
2015/06/16 职场文书
立春观后感
2015/06/18 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS