在做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>