css中注意下:t arg et和trans IT ion部分就大致清楚了.代码中css的 PR efix为了 简明 只用了-moz-:target定位的元素对应于浏览器url最后的 # xxx,xxx是元素的id,我们通过点击标题链接实现切换功能。以下是jsfiddle中得实际效果（firefox浏览 或者 修改css前缀）
复制代码
代码如下:
<div class="accordion">
<div class="item">
<h3 class="title round">
<a hr ef="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit am et, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div><div class="accordion">
<div class="item">
<h3 class="title round">
<a href="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div>
css:
复制代码
代码如下:
.round {
border-radius: 5px;
}
.accordion {
width: 500px;
box -s hadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 5px;
border: 5px solid rgba(54,54,54,0.3);
position: absolute;
top: 20px;
left: 50px;
}
.accordion .item {
mar gin -bottom: 5px;
}
.accordion .item:last-child {
margin-bottom: 0;
}
.accordion .title {
background:-moz-linear-gra die nt(top, #eee, #dcdcdc, #dcdcdc, #dcdcdc);
}
.accordion .title > a{
height: 30px;
dis play :block;
line-height: 30px;
padding-left: 10px;
font- Size: 15px;
color: #585858;
text-shadow: 1px 1px 1px #fff;
font-weight : bold;
text-decoration:none;
}
.accordion .title+.content {
height: 0;
padding: 0;
opacity: 0;
border: 1px solid #eee;
overflow-y: auto;
-moz -t ransition: all 0.2s linear;
}
.accordion .title+.content:target {
opacity: 1;
padding: 5px;
height: auto;
margin: 5px auto;
}
.accordion .content p {
margin-bottom: 5px;
color: #585858;
text-shadow: 0 1px 1px #dcdcdc;
}
总结
以上是 为你收集整理的 纯css的accordion效果(代码分享) 全部内容，希望文章能够帮你解决 纯css的accordion效果(代码分享) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于纯css的accordion效果(代码分享)的详细内容...