纯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 选择器 基本选择器介绍
Jan 21 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
Html5新增了哪些功能
Apr 16 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
PHP云打印类完整示例
2016/10/15 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
python中遍历文件的3个方法
2014/09/02 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python利用7z批量解压rar的实现
2019/08/07 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
岗位职责的定义
2013/11/10 职场文书
培训讲师邀请函
2014/01/10 职场文书
六查六看自查材料
2014/02/17 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
yy生日主持词
2014/03/20 职场文书
股东合作协议书
2014/04/14 职场文书
2014年行政部工作总结
2014/11/19 职场文书
三峡人家导游词
2015/01/31 职场文书
检察院起诉书
2015/05/20 职场文书
学术研讨会主持词
2015/07/04 职场文书