手风琴实现效果纯css

在做css实现手风琴的效果过程中，发现了一个有趣的现象：当使用背景图片的时候，最后一个图片的animation效果会出现问题。我相出的原因是，因为图片是作为li的背景图片的，而当hover时候li的宽度变了，背景图片的改变是一样快的。

但是使用img标签，虽然li的宽度变了，但是img的宽度不会改变

<!DOCTYPE html>
<html>
<head>
   <title>js实现手风琴效果</title>
   <meta charset="utf-8">
   <style>
        body{
           margin: 0;
           padding: 0;
        }

        #box{
           width: 1200px;
           height: 200px;
           padding: 5% 5%;
           overflow:hidden;
        }

        #box ul{
           width: 100%;
           height: 100%;
           margin: 0;
           padding: 0;
           list-style-type: none;
           overflow: hidden;

        }
        #box ul li{
           width: 200px;
           height: 200px;
           float: left;
              /*background: url(http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg) no-repeat center;*/
           transition: width 1s linear 0s;
        }

       #box ul:hover li{
           width: 170px;
        }

        #box ul li:hover{
           width: 350px;
        }

   </style>
</head>
<body>
    <div id="box">
       <ul>
             <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
            <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
            <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
            <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
            <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
            <li><img src="http://img.elongstatic.com/index/ifold/20150422_ifold1.jpg" alt=""></li>
       </ul>
    </div>
</body>
</html>

手风琴实现效果纯css

猜你喜欢