纯css3实现的手风琴

本文演示了用纯css3实现手风琴菜单效果，放在手机端很好，不用加载js文件。

分类：图片代码 > 手风琴难易：高级

查看演示下载资源下载积分： 20 积分

手风琴图片、标题、描述html代码

<div id="accordion" class="clearfix">
    <article>
        <h2>Section 3</h2>
        <img src="img/img3.jpg" width="100" height="88"/>
        <p>
            <a href='http://www.sucaihuo.com/js/619.html' target='_blank'>catslider简单的多商品分类滑动</a>
        </p>
        <p>catslider是一个简单的支持移动端等设备的滑块插件。</p>
    </article>
    <article>
        <h2>Section 4</h2>
        <img src="img/img4.jpg" width="100" height="88"/>
        <p>
            <a href='http://www.sucaihuo.com/js/620.html' target='_blank'>slider响应式垂直滚动插件</a>
        </p>
        <p>Slider.js是一款垂直滚动插件，本文演示了商城中经常看到的查看商品详情模板，右下角有上一页和下一页分页效果。</p>
    </article>
</div>

#accordion article {
    -webkit-transform: perspective(900px) rotateY(60deg);
    -webkit-transition: all 0.7s ease-in-out;
    background: #fff;
    border: 1px solid #f3f3f3;
    box-shadow: 0px 5px 15px gray;
    float: left;
    height: 420px;
    margin-left: -180px;
    padding: 20px;
    width: 220px;
}
#accordion article:first-child {
    margin-left: 0px;
}
#accordion article img {
    float: left;
    padding: 0 10px 5px 0;
}
#accordion article:hover {
    -webkit-transform: perspective(0) rotateY(-10deg);
    margin: 0 140px 0 -60px;
}