手風琴實現效果純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>