纯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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS list-style-type属性使用方法
May 21 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下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js读取配置文件自写
2014/02/11 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python序列化pickle模块使用详解
2020/03/05 Python
keras打印loss对权重的导数方式
2020/06/10 Python
jupyter 添加不同内核的操作
2021/02/06 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
六查六看自查材料
2014/02/17 职场文书
小摄影师教学反思
2014/04/27 职场文书
论文评语大全
2014/04/29 职场文书
物业管理工作方案
2014/05/10 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
试了下Golang实现try catch的方法
2021/07/01 Golang
vue选项卡切换的实现案例
2022/04/11 Vue.js
go goth封装第三方认证库示例详解
2022/08/14 Golang