纯css完成手风琴效果
程序员文章站
2022-05-26 22:30:51
...
代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直手风琴</title>
<style>
.menuBox {
background: #fff;
color: #424242;
font-size: 14px;
margin: 0 auto;
padding: 10px;
width: 500px;
}
.menuBox h2 {
margin: 5px 0;
padding: 0;
position: relative;
}
/* 制作向下的三角效果 */
.menuBox h2:before {
border: 5px solid #fff;
border-color: #fff transparent transparent;
content: "";
height: 0;
position: absolute;
right: 10px;
top: 15px;
width: 0;
}
/* 制作手风琴标题栏效果 */
.menuBox h2 a {
background: #8f8f8f;
background: linear-gradient(top, #cecece, #8f8f8f);
border-radius: 5px;
color: #424242;
display: block;
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration: none;
}
/* 目标标题的效果 */
.menuBox :target a,
.menuBox h2 a:focus,
.menuBox h2 a:hover,
.menuBox h2 a:active {
background: #2288bb;
background: linear-gradient(top, #6bb2ff, #2288dd);
color: #fff;
}
/* 标题栏对应的内容 */
.menuBox p {
margin: 0;
height: 0;
/* 默认高度为0,达到隐藏的效果 */
overflow: hidden;
padding: 0 10px;
transition: height 0.5s ease-in;
}
/* 显示内容的关键性代码
显示且展开对应目标内容
*/
.menuBox :target p {
height: 100px;
overflow: hidden;
}
/* 展开标题的三角形效果 */
.menuBox :target h2:before {
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="menuBox">
<div class="menuSection" id="new">
<h2><a href="#new">最新资讯</a></h2>
<p>最新资讯......</p>
</div>
<div class="menuSection" id="technology">
<h2><a href="#technology">最新技术</a></h2>
<p>最新技术......</p>
</div>
<div class="menuSection" id="Quotations">
<h2><a href="#Quotations">经典语录</a></h2>
<p>经典语录......</p>
</div>
</div>
</body>
</html>
效果
知识点分析
css3选择器的种类（五类）
第一类： 基本选择器
第二类： 层次选择器
第三类： 伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
第四类： 伪元素
第五类： 属性选择器
用到的元素选择器
基本选择器
①元素选择器
②类选择器
③群组选择器
层次选择器
①后代选择器（包含选择器）
伪类选择器
①动态伪类选择器 :focus,:hover,:active
②目标伪类选择器 :target
③语言伪类选择器 lang=“zh-cn”
伪类选择器
①伪元素::before
上一篇： 设置Windows 7锁屏背景图片
下一篇： yii实现加、删、改、查大全