[TimLinux] CSS 纯CSS实现动画展开/收起功能

时间:2022-06-12 00:16:53

内容转自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路径描边动画效果&lpar;转载&rpar;

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

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

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

随机推荐

  1. LeetCode-Group Shifted Strings

    Given a string, we can "shift" each of its letter to its successive letter, for example: & ...

  2. 关于xcode6打包以及上线前企业部署测试的说明 --转自张诚教授微博

    xcode6如何打包 首先clean然后点击归档 点击打包之后保存 点选第一个以后检查相关证书签名 那么我们开发完以后,在上线前如何给别人测试 有2种方法 1.使用299美金的企业开发者账号搭建企业部 ...

  3. javascript 设为首页 &vert; 加入收藏夹 JS代码

    我们介绍一个可兼容所有浏览器的加入收藏代码代码,大概原理是这样的我们根据获取用户navigator.userAgent.toLowerCase()信息来判断浏览器,根据浏览器是否支持加入收藏js命令, ...

  4. HTML&plus;CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  5. Centos 6&period;4下使用VSFTPD无法正常连接与无法上传文件的问题解决

    发表于 2014 年 4 月 13 日 作者 SCKA 最近利用Linux搭建服务器 搭建FTP的时候决定使用VSFTP搭建,结果却出现了无法正常连接与无法上传文件等诸多问题 经过许久的努力,终于让V ...

  6. &lbrack;LeetCode&rsqb; Random Flip Matrix 随机翻转矩阵

    You are given the number of rows n_rows and number of columns n_cols of a 2D binary matrix where all ...

  7. &&num;127827&semi; react&comma;jroll滑动删除 &&num;127827&semi;

    import React, { Component } from 'react'; import '../src/css/reset.css'; import '../src/css/delete.c ...

  8. &lbrack;POI 2009&rsqb;Lyz

    Description 题库链接 初始时滑冰俱乐部有 \(1\) 到 \(n\) 号的溜冰鞋各 \(k\) 双.已知 \(x\) 号脚的人可以穿 \(x\) 到 \(x+d\) 的溜冰鞋.有 \(m\ ...

  9. android studio更新gradle失败的解决办法-转

    android studio中每次自动更新gradle时速度实在太慢因为gradle服务器比较慢,所以更新gradle会比较慢,建议先下载下来,然后手动添加到gradle的下载目录,提升速度. 使用下 ...

  10. linux系统无法上外网,路由器可以上网,可以ping通路由器,ping不通外网IP

    临时生效方法(添加路由网关),执行: #route add default gw 192.168.92.1   #根据实际网关IP填写 如果不行,使用下面方法: 一:使用 route 命令添加使用ro ...