html+css3 过渡模块-手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>167-过渡模块-手风琴效果</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
/*水平排版*/
float: left;
list-style: none;
width: 160px;
height: 300px;
background-color: red;
/*border: 1px solid #000;
box-sizing: border-box;*/
}
ul:hover li{
width: 100px;
transition-property: width;
transition-duration: 0.5s;
}
ul li:hover{
width: 460px;
}
</style>
</head>
<body>
<ul>
<li><img src="ad1.png" alt=""></li>
<li><img src="ad2.png" alt=""></li>
<li><img src="ad3.png" alt=""></li>
<li><img src="ad4.png" alt=""></li>
<li><img src="ad5.png" alt=""></li>
<li><img src="ad6.png" alt=""></li>
</ul>
</body>
</html>