纯css的accordion实际效果(编码共享)

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

css中留意下:target和transition一部分就大概清晰了.编码中css的prefix以便简要只用了-moz-:target精准定位的元素对应于访问器url最终的#xxx,xxx是元素的id,大家根据点一下题目连接完成切换作用。下列是jsfiddle中得具体实际效果(firefox访问或改动css前缀)

拷贝编码
编码以下:

<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><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-shadow: 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 {
margin-bottom: 5px;
}
.accordion .item:last-child {
margin-bottom: 0;
}
.accordion .title {
background:-moz-linear-gradient(top, #eee, #dcdcdc, #dcdcdc, #dcdcdc);
}
.accordion .title > a{
height: 30px;
display: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-transition: 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 reset 重设款式详细介绍 返回下一篇:没有了