纯css3手风琴效果2

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

纯css3手风琴效果2

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

demodownload

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;
}

demodownload

查看更多:http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Air Max Flair KPU

如需转载,烦请注明出处:https://www.w3cplus.com/demo/398.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部