内容转自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内置模块collections介绍

    目录 python内置模块collections介绍 1.namedtuple 2.deque 3.defaultdict 4.OrderedDict 5.ChainMap 6.Counter 7.小 ...

  2. 在oracle数据库中创建DBLink

    涉及到两个数据库之间的访问时,可以创建datebase link来互相访问. ’创建方法: 1.通过PL/SQL客户端,找到datebase link,右键新建 输入相应信息 2.直接用命令行创建 一 ...

  3. PHP 面试官问：你说说Redis的几个过期策略？

    在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期.当设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. 设置过期时间 expire ke ...

  4. JDBC事务的简单使用

    在实际功能当中,经常会碰到同时对一组数据进行增加和减少,最常见的就是交易功能. 事务内执行的语句,要么都成功,要么都失败,如果有一句没执行成功,整个事务都不会提交的. import java.sql. ...

  5. ffmpeg centos yum安装

    CentOS 6&7安装ffmpeg   CentOS 6和7安装方法是不一样的,下面分别说明: 安装前都需要先安装epel扩展源 yum -y install epel-release ce ...

  6. lqb 入门训练 圆的面积 (PS: PI的精确计算方法 atan(1.0) * 4)

    入门训练 圆的面积 时间限制:1.0s   内存限制:256.0MB     问题描述 给定圆的半径r,求圆的面积. 输入格式 输入包含一个整数r,表示圆的半径. 输出格式 输出一行,包含一个实数,四 ...

  7. 《JAVA 程序员面试宝典（第四版）》之循环、条件、概率

        分享内容:关于集合的使用   书页号码:77页 题目:一个字符串中包含a~z中的多个字符,如有重复,如String data = "aavzcadfdsfsdhshgwasdfasd ...

  8. linux内核的preempt抢占调度，preempt_count抢占保护“锁”

    抢断调度,是调度机制对实时系统需要的支持,是一种快速响应的重调度机制.既然与重调度有关,那么就先回顾一下调度和重调度. 调度分两种情况,1. 一种是自愿调度,由代码主动调用schedule来让度cpu ...

  9. 024.掌握Pod-部署MongoDB

    一 前期准备 1.1 前置条件 集群部署:Kubernetes集群部署参考003--019. glusterfs-Kubernetes部署:参考<附010.Kubernetes永久存储之Glus ...

  10. 正确理解 PHP 的重载

    PHP 的重载跟 Java 的重载不同,不可混为一谈.Java 允许类中存在多个同名函数,每个函数的参数不相同,而 PHP 中只允许存在一个同名函数.例如,Java 的构造函数可以有多个,PHP 的构 ...