一、效果图：
二、实现功能：
鼠标悬浮在某个图片上后，会缓慢展开该图片，其他收缩起来。当失去鼠标悬浮后，将所有图片闭合起来。
三、代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百叶窗效果</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 875px;
height: 360px;
margin: 200px auto;
border: 3px solid #194b8d;
overflow: hidden;
}
.container ul{
display: flex;
}
ul li{
width: 80px;
height: 360px;
border-left: 3px solid #194b8d;
box-shadow: 0 0 25px #000000;
list-style: none;
/*缓慢收缩/展开效果*/
transition: all 2s;
}
ul li img{
display: block;
width: 540px;
height: 360px;
}
ul:hover li{
width: 80px;
}
ul li:hover{
width: 540px;
}
</style>
<body>
<div class="container">
<ul>
<li><img src="https://oss.zhaojiajuwang.com/img/goods/416/146832/371445_540X360.jpg"></img></li>
<li><img src="https://oss.zhaojiajuwang.com/img/goods/418/149395/379287_540X360.jpg"></img></li>
<li><img src="https://oss.zhaojiajuwang.com/img/goods/456/170379/436061_540X360.jpg"></img></li>
<li><img src="https://oss.zhaojiajuwang.com/img/goods/399/166309/424304_540X360.jpg"></img></li>
<li><img src="https://oss.zhaojiajuwang.com/img/goods/255/118977/307822_540X360.jpg"></img></li>
</ul>
</div>
</body>
</html>