[TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自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实现动画展开/收起功能的更多相关文章
- HTML-003-模拟IDE代码展开收起功能简单示例
当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css 纯css自适应页面 示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JQ——利用一个开关,点击一个按钮完成展开收起功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 大神写的一个纯CSS圆角框,膜拜!(支持IE9一下的低版本)
留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 纯css实现省略号,兼容火狐,IE9,chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 实现点击展开收起
Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- 纯css做的安卓开机动画
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...
随机推荐
- PHP array_multisort实现二维数组排序
PHP array_multisort实现二维数组排序 参数中的数组被当成一个表的列并以行来进行排序 - 这类似 SQL 的 ORDER BY 子句的功能.第一个数组是要排序的主要数组.数组中的行(值 ...
- Ansible之系列命令详解
ansible系列命令有:ansible.ansible-doc.ansible-playbook.ansible-vault.ansible-console.ansible-galaxy.ansib ...
- JavaScript with Image:创建缩略图
当图片很大,直接把图片从Server下载到浏览器上看是一种很不明智的做法,浪费了服务器的资源,网络带宽和客户端的资源.所以,通常Server和Client之间会传输缩略图,只有当Client请求某张图 ...
- SpringBoot基本配置详解
SpringBoot项目有一些基本的配置,比如启动图案(banner),比如默认配置文件application.properties,以及相关的默认配置项. 示例项目代码在:https://githu ...
- WordPress 去掉功能中的 wordpress.org
WordPress 去掉功能中的 wordpress.org
- pat 1041 Be Unique(20 分)
1041 Be Unique(20 分) Being unique is so important to people on Mars that even their lottery is desig ...
- cn_windows虚拟机配置
1.打开“VMware”,点击“主页”,点“创建新的虚拟机”: 2.会弹出一个“新建虚拟机向导”,类型选择“典型”,点击“下一步”: 3.选择“稍后安装操作系统”,点击“下一步”: 4.选择“Micr ...
- A Lot of Games(Trie树 + 博弈)
题目链接:http://codeforces.com/contest/455/problem/B 题意:n, k 分别表示 字符串组数 和 比赛次数. 从一个空单词开始, a,b二人分别轮流往单词后 ...
- 1 数据 & 图表
瞎逼逼:虽然是统计专业,但学艺不精.大学受过的专业训练很少,妥妥学渣.因此工作后决定重新复习,阅读材料为贾俊平的<统计学>第7版.每周更新. 我不按照书里的逻辑顺序和所有知识点来写我的笔记 ...
- python3 之 面向对象(类)、继承、派生和多态
类提供了一种 组合数据和功能 的方法.创建一个新类意味着:创建一个新 类型 的对象,从而允许创建一个该类型的新 实例. 每个类的实例可以拥有: 保存自己状态的属性. 一个类的实例也可以有改变自己状态 ...