纯css实现手风琴效果
话不多说直接上代码 (图片的话,自己找几张代替就OK)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 100px auto;
border: 2px solid #568bc7;
width: 800px;
height: 300px;
overflow: hidden;
}
.container ul {
display: flex;
}
.container li {
width: 160px;
height: 300px;
list-style: none;
border-left: 1px solid #194b8d;
box-shadow: 0 0 25px #000;
transition: all 0.5s;
}
.container li img {
display: block;
width: 800px;
height: 300px;
}
.container ul:hover li {
width: 40px;
}
.container ul li:hover {
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><img src="a1.jpg" alt=""></li>
<li><img src="a2.jpg" alt=""></li>
<li><img src="a3.jpg" alt=""></li>
<li><img src="a4.jpg" alt=""></li>
<li><img src="a5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
其实就是用视觉欺骗做出的效果,有错误的地方,望大佬们指出。