”推拉门”动效也可以称作”手风琴”效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。
推拉门收缩状态.png
“推拉门”展开状态.png
“推拉门”实现方法一：改变图片宽度
html+css代码
<body>
<div class=box>
<ul>
<!-- <li></li> -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul
