[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 ...
随机推荐
- Python 基础之re 模块
Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...
- SpringMVC错误:Failed to read candidate component class:file... ...
Failed to read candidate component class:file错误分析和处理 org.springframework.beans.factory.BeanDefinitio ...
- Servlet中response的相关案例(重定型,验证码,ServletContext文件下载)
重定向 首先设置状态码,设置响应头 //访问Demo1自动跳转至Demo2 //设置状态码 response.setStatus(302); //设置响应头 response.setHeader(&q ...
- 3. 彤哥说netty系列之Java BIO NIO AIO进化史
你好,我是彤哥,本篇是netty系列的第三篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/ ...
- U盘安装centos7 系统卡在 starting dracut initqueue hook
U盘安装centos7启动过程中出现: [ok] Reached target Basic System 或者 [ok] starting dracut initqueue hook 下面是我解决的过 ...
- 插入订单并且输出订单号的sql存储过程
--插入订单-- create proc InsertOrders ( @OrderNumber varchar(300), @OrderState varchar(30), @OrderType v ...
- NetCore3.0 文件上传与大文件上传的限制
NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为“缓冲”.“流式”.我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保存到内存,然后我们通过IFormFile ...
- CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画
最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...
- Centos下的MySQL安装及配置
里使用的是VMware虚拟机和Centos7系统 虚拟机安装这里不多讲,网上教程很多了,这里就介绍下虚拟机的网络配置. 虚拟机网络配置 Centos网络连接模式这里设置为桥接模式,不用勾选复制物理网络 ...
- 异步任务AsyncTask使用解析
在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...