利用css3的transition和nth-child实现手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding: 0;}
div{width: 780px;height: 200px;overflow: hidden;margin:50px auto;}
ul{width: 780px;height: 200px;}
li{float: left;width: 130px;list-style: none;transition:all .4s .01s linear;}
ul:hover li{width: 100px;}
li:nth-child(1):hover{width: 280px;}
li:nth-child(2):hover{width: 280px;}
li:nth-child(3):hover{width: 280px;}
li:nth-child(4):hover{width: 280px;}
li:nth-child(5):hover{width: 280px;}
li:nth-child(6):hover{width: 280px;}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
</div>
</body>
</html>
1993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
