css实现手风琴动画效果

利用css写手风琴样式，简简单单5步实现

下面贴代码

<style>
    .accordion-box{ width:  100%; height: 500px; margin:0 auto; overflow: hidden;}
    .accordion-box div{ width: 25%;  float: left; transition: all 1s;}
    .accordion img{  width: 760px; cursor: pointer;}
    .accordion-box:hover div{ width: 5%; }
    .accordion-box div:hover{ width: 85%; }
    /*宽度根据自己的比例自行设定*/
</style>
<div class="accordion-box">
     <div class="accordion"><img src="./Relyon/img/background2.png" alt=""></div>
     <div class="accordion"><img src="./Relyon/img/background2.png" alt=""></div>
     <div class="accordion"><img src="./Relyon/img/background2.png" alt=""></div>
     <div class="accordion"><img src="./Relyon/img/background2.png" alt=""></div>
</div>

下面是效果图