利用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>
下面是效果图