实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>0509/图片堆叠索引卡</title>
<!-- http://cubic-bezier.com/#.63,.44,.95,.12 运动轨迹 -->
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 1200px;height:330px;margin:100px auto 0;background-color:#fff;box-shadow:0 0 8px 2px #ccc;}
.box ul{display:flex;list-style:none;padding:20px 0 20px 20px;}
.box ul li{width:180px;height:290px;background-color:#666;margin-right:18px;border-radius:2%;overflow:hidden;transition: 1s cubic-bezier(.63,.44,.95,.12);cursor:pointer;}
.box ul:hover li {width: 100px;}
.box ul li:hover{width:580px;height:290px;transition: 1s ;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="https://img.php.cn//upload/image/246/762/342/1525859570591772.jpg" alt=""></li>
<li><img src="https://img.php.cn//upload/image/705/500/168/1525859574122055.jpg" alt=""></li>
<li><img src="https://img.php.cn//upload/image/161/538/161/1525859576535764.jpg" alt=""></li>
<li><img src="https://img.php.cn//upload/image/838/733/259/1525859580284614.jpg" alt=""></li>
<li><img src="https://img.php.cn//upload/image/892/479/995/1525859583679487.jpg" alt=""></li>
<li><img src="https://img.php.cn//upload/image/697/635/619/1525859586194485.jpg" alt=""></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
