HTML5+CSS3点击指定按钮显示某些内容效果
2024-08-26 05:11:59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3点击显示</title>
<style>
*{ margin:0; padding:0; }
html{ height:100%; }
p{ padding:10px 0; }
body{ min-height:100%; font-family:arial; position:relative; }
body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
#wrap > label{ display:inline-block; }
#wrap > label{
background:#f1103a;
border-radius:50px;
color: #FFF;
cursor: pointer;
display: block;
font-family: Courier New;
font-size: 25px;
font-weight: bold;
width: 30px;
height: 30px;
line-height: 35px;
text-align: center;
text-shadow: 0 -4px;
}
#wrap > label:hover{ background:#000; }
</style>
</head>
<body>
<input type='checkbox' id='sideToggle'>
<aside><h2>Side Menu</h2></aside>
<div id='wrap'>
<label id='sideMenuControl' for='sideToggle'>=</label>
<p>HTML5/CSS3点击显示侧边框 </p>
</div>
</body>
</html>
效果:
转载:http://www.xszzz.com/2013/07/96.html
最新文章
- 国产方法论之 ReDoIt -- 惟思捷
- ORACLE 物理读 逻辑读 一致性读 当前模式读总结浅析
- 云计算与 OpenStack - 每天5分钟玩转 OpenStack(14)
- Ajax跨域访问
- NGUI BUG /各种坑
- weblogic重置用户名密码。
- IPC-管道
- 多重背包问题:悼念512汶川大地震遇难同胞——珍惜现在,感恩生活(HDU 2191)(二进制优化)
- SQL Server 连接问题圣经-命名管道
- 看oracle版本
- js中object的申明方法
- 增量与位置PID
- LCS算法
- MySQL慢查询详解
- mysql如何开启远程连接
- Python的字符串格式化符号
- CSS小随笔(三)浮动与定位
- Android 深入理解Loader机制 让APP轻装上阵
- C#System.Text.RegularExpressions.Regex使用(二) .
- [Swift]LeetCode450. 删除二叉搜索树中的节点 | Delete Node in a BST