用css做的风琴相册

最新推荐文章于 2022-09-04 21:24:14 发布

leiyanhongfhc

最新推荐文章于 2022-09-04 21:24:14 发布

阅读量427

点赞数

文章标签：用css做的风琴相册

本文链接：https://blog.csdn.net/leiyanhongfhc/article/details/77435894

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>风琴相册</title>

<style type="text/css">

* {
padding:0;
margin: 0;
}
.heaber {
width:800px;
height:400px;
margin: 100px auto;
overflow: hidden;
box-shadow: 0 0 13px 2px;

}
.header ul {
margin-left: 600px;
}
.header ul li {
overflow: hidden;
float: left;
height: 500px;
width: 150px;
list-style: none;
border-left: 2px solid #aaa;
box-shadow: 0 0 240px 50px rgba(0,0,0,0.4);
}
.header ul:hover li{
width: 120px;
}
.header ul li:hover {
width: 300px;
}
</style>
</head>
<body>
<div class="header">
<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/2.jpg"></li>
<li><img src="img/2.jpg"></li>
</ul>

</div>

</body>
</html>