您的位置：首页 > Web前端 > CSS

纯CSS3运用target伪类元素制作手风琴效果

2017-03-29 23:34 323 查看

什么是target伪类元素？查了一下W3C

原理就是点击相应的A标签触发相应的锚点，从而实现使用target伪类元素选择相应的内容进行实现，实现代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}

.box {
margin: 100px auto;
width: 400px;
}

.box .item h3 {
height: 20px;
width: 400px;
line-height: 20px;
color: #fff;
background: blue;
border-bottom: 1px solid #ccc;
}

.box .item h3 a {
color: #fff;
}

.box .item>div {
height: 0;
width: 400px;
background: yellow;
transition: all 2s;
overflow: hidden;
}

.box .item :target {
height: 200px;
display: block;
background: red;
height: 200px;
transition: all 2s;
}
</style>
</head>

<body>
<div class="box">
<div class="item">
<h3><a href="#itemContent01">这个是标题</a></h3>
<div id="itemContent01">
这个是标题内容部分
</div>
</div>
<div class="item">
<h3><a href="#itemContent02">这个是标题</a></h3>
<div id="itemContent02">
这个是标题内容部分
</div>
</div>
<div class="item">
<h3><a href="#itemContent03">这个是标题</a></h3>
<div id="itemContent03">
这个是标题内容部分
</div>
</div>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航