内容转自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. 【转载】常见十大经典排序算法及C语言实现【附动图图解】

    原文链接:https://www.cnblogs.com/onepixel/p/7674659.html 注意: 原文中的算法实现都是基于JS,本文全部修改为C实现,并且统一排序接口,另外增加了一些描 ...

  2. 使用CXF发布webservice服务及注意要点

    一.概念 1.什么是webservice Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML标准来描述.发布.发现.协调和配置这些应用程序,用 ...

  3. Java虚拟机-字节码指令

    目录 字节码指令 字节码与数据类型 加载和存储指令 运算指令 类型转换指令 对象创建与访问指令 操作数栈管理指令 控制转移指令 方法调用和返回指令 异常处理指令 同步指令 字节码指令 Java虚拟机的 ...

  4. JS 原生面经从入门到放弃 篇幅较长，建议收藏

    前言 是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http. 函数 ...

  5. nyoj 311-完全背包 (动态规划， 完全背包)

    311-完全背包 内存限制:64MB 时间限制:4000ms Special Judge: No accepted:5 submit:7 题目描述: 直接说题意,完全背包定义有N种物品和一个容量为V的 ...

  6. 力扣（LeetCode）验证回文串 个人题解（C++）

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  7. 构思一个在windows下仿objc基于动画层ui编程的ui引擎

    用c/c++编程有些年了,十个指头可以数齐,在涉入iOS objc开发后,有种无比舒服的感觉,尤其在UI开发上. 在QuartzCore.framework下动画和透明窗口等许多效果的事都变得那么方便 ...

  8. Java并发之volatile关键字

    引言 说到多线程,我觉得我们最重要的是要理解一个临界区概念. 举个例子,一个班上1个女孩子(临界区),49个男孩子(线程),男孩子的目标就是这一个女孩子,就是会有竞争关系(线程安全问题).推广到实际场 ...

  9. labview连接mysql数据库

    前期准备:安装MySQL 并设置可远程连接 第一步 安装 mysql connector odbc https://www.cr173.com/soft/50794.html 第二步:创建数据源 本机 ...

  10. python3 之 内置函数enumerate

    python3 内置函数enumerate一.简介: 该函数在字面上是枚举.列举的意思,用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列, 同时列出数据和数据下标,一般用在 for ...