纯css3实现的手风琴

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

手风琴图片、标题、描述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.erdangjiade.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.erdangjiade.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; 
}