css3 手风琴效果,纯css3手风琴效果2

这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开(radio的只有一个是选中状态)，而checkbox则表示可以同时展开多个(checkbox可以多个选中)。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。

css主要代码：

.ac-container {

margin: 10px auto 30px;

text-align: left;

width: 400px;

}

.ac-container label {

background: -moz-linear-gradient(center top , #FFFFFF 1%, #EAEAEA 100%) repeat scroll 0 0 transparent;

box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 1px 0 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1);

color: #777777;

cursor: pointer;

display: block;

font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;

font-size: 19px;

height: 30px;

line-height: 33px;

padding: 5px 20px;

position: relative;

text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

z-index: 20;

}

.ac-container label:hover {

background: none repeat scroll 0 0 #FFFFFF;

}

.ac-container input:checked + label, .ac-container input:checked + label:hover {

background: none repeat scroll 0 0 #C6E1EC;

box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1);

color: #3D7489;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);

}

.ac-container label:hover:after, .ac-container input:checked + label:hover:after {

background: url("../images/arrow_down.png") no-repeat scroll center center transparent;

content: "";

height: 24px;

position: absolute;

right: 13px;

top: 7px;

width: 24px;

}

.ac-container input:checked + label:hover:after {

background-image: url("../images/arrow_up.png");

}

.ac-container input {

display: none;

}

.ac-container article {

-moz-transition: height 0.3s ease-in-out 0s, box-shadow 0.6s linear 0s;

background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);

height: 0;

margin-top: -1px;

overflow: hidden;

position: relative;

z-index: 10;

}

.ac-container article p {

color: #777777;

font-size: 14px;

font-style: italic;

line-height: 23px;

padding: 20px;

text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

}

.ac-container input:checked ~ article {

-moz-transition: height 0.5s ease-in-out 0s, box-shadow 0.1s linear 0s;

box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3);

}

.ac-container input:checked ~ article.ac-small {

height: 140px;

}

.ac-container input:checked ~ article.ac-medium {

height: 180px;

}

.ac-container input:checked ~ article.ac-large {

height: 230px;

}