内容转自CSS世界,理解之后进行了简化,简化后代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS世界--展开/收起功能</title>
<style>
.table {
display: table;
width: 100%;
width: calc(100% - 30px);
max-width: 400px;
margin: auto;
table-layout: fixed;
text-align: left;
}
.td {
display: table-cell;
padding: 5px;
} input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
}
.check-in,
.check-out {
color: #34538b;
cursor: pointer;
}
.check-out {
display: none;
}
:checked ~ .check-out {
display: inline-block;
}
:checked ~ .check-in {
display: none;
} .element {
max-height: 0;
overflow: hidden;
transition: max-height .5s;
} :checked ~ .element {
max-height: 666px;
}
</style>
</head>
<body>
<div class="table">
<div class="td">
<input id="check2" type="checkbox">
<p>个人觉得,display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
<div class="element">
<p>display:table-cell其他一些应用,例如,两栏自适应布局,垂直居
中效果等等都是可以通过其他技术手段模拟出来的,但是,根据列表个数
自动等宽的效果,其他CSS是很难模拟的,尤其当需要兼容IE8浏览器的时
候。</p>
<p>然而,此方法也有局限性,就是只能实现单行列表的等分,所以,如
果我们希望列表数目超过一定值的时候变成多行,就需要根据数目不同,
输出不同的DOM结构,仅仅靠CSS有难度。</p>
</div>
<label for="check2" class="check-in">更多↓</label>
<label for="check2" class="check-out">收起↑</label>
</div>
</div>
</body>
</html>

[TimLinux] CSS 纯CSS实现动画展开/收起功能的更多相关文章

  1. HTML-003-模拟IDE代码展开收起功能简单示例

    当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.

  2. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. css 纯css自适应页面 示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JQ——利用一个开关,点击一个按钮完成展开收起功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. 纯css实现省略号,兼容火狐,IE9,chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  8. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  9. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

随机推荐

  1. Python 基础之re 模块

    Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...

  2. SpringMVC错误:Failed to read candidate component class:file... ...

    Failed to read candidate component class:file错误分析和处理 org.springframework.beans.factory.BeanDefinitio ...

  3. Servlet中response的相关案例(重定型,验证码,ServletContext文件下载)

    重定向 首先设置状态码,设置响应头 //访问Demo1自动跳转至Demo2 //设置状态码 response.setStatus(302); //设置响应头 response.setHeader(&q ...

  4. 3. 彤哥说netty系列之Java BIO NIO AIO进化史

    你好,我是彤哥,本篇是netty系列的第三篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/ ...

  5. U盘安装centos7 系统卡在 starting dracut initqueue hook

    U盘安装centos7启动过程中出现: [ok] Reached target Basic System 或者 [ok] starting dracut initqueue hook 下面是我解决的过 ...

  6. 插入订单并且输出订单号的sql存储过程

    --插入订单-- create proc InsertOrders ( @OrderNumber varchar(300), @OrderState varchar(30), @OrderType v ...

  7. NetCore3.0 文件上传与大文件上传的限制

    NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为“缓冲”.“流式”.我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保存到内存,然后我们通过IFormFile ...

  8. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

  9. Centos下的MySQL安装及配置

    里使用的是VMware虚拟机和Centos7系统 虚拟机安装这里不多讲,网上教程很多了,这里就介绍下虚拟机的网络配置. 虚拟机网络配置 Centos网络连接模式这里设置为桥接模式,不用勾选复制物理网络 ...

  10. 异步任务AsyncTask使用解析

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...