您现在的位置是:网站首页> 编程资料编程资料
纯css的accordion效果(代码分享)_Div+CSS教程_CSS_网页制作_
2021-09-08
887人已围观
简介 类似的例子网上也有,感兴趣的同学可以去google,这里我自己试着去实现一个,其实很简单,主要是用到了css3中的:target伪类和transition效果.
css中注意下:target和transition部分就大致清楚了.代码中css的prefix为了简明只用了-moz-:target定位的元素对应于浏览器url最后的#xxx,xxx是元素的id,我们通过点击标题链接实现切换功能。以下是jsfiddle中得实际效果(firefox浏览或者修改css前缀)
title one
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
title two
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
title three
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
title one
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
title two
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
title three
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
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 border引发的血案 _CSS教程_CSS_网页制作_
- IE 元素默认高度研究_CSS教程_CSS_网页制作_
- 级联样式文件共通样式整理 _CSS教程_CSS_网页制作_
- 写html时,经常用到tab结构_CSS教程_CSS_网页制作_
- IE环境下判断IE版本的语句...[if lte IE 6]……[endif][if lte IE 7]……[endif] _浏览器兼容教程_CSS_网页制作_
- CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器_浏览器兼容教程_CSS_网页制作_
- 让IE6支持css3,让 IE7、IE8 都支持CSS3_css3_CSS_网页制作_
- DIV CSS网页布局中常用的列表元素_CSS教程_CSS_网页制作_
- CSS布局中如何组织样式表以便于简化、维护_CSS教程_CSS_网页制作_
- CSS常用优化技巧_CSS教程_CSS_网页制作_