跟着up主码小渣学习(无改动)
效果:
HTML:
<!doctypehtml>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>百叶窗</title>
<link rel="stylesheet" href="win.css">
</head>
<body>
<ul class="main">
<li>
<img src="images/1.jpg" alt="">
<div class="flag"></div>
</li>
<li>
<img src="images/2.jpg" alt="">
<div class="flag"></div>
</li>
<li>
<img src="images/3.jpg" alt="">
<div class="flag"></div>
</li>
<li>
<img src="images/4.jpg" alt="">
<div class="flag"></div>
</li>
<li>
<img src="images/5.jpg" alt="">
<div class="flag"></div>
</li>
</ul>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
body{
background: url("../images/bg.png");
}
.main {
width: 805px;
height: 320px;
margin: 150px auto;
overflow: hidden;
}
li {
width: 160px;
float: left;
border-left: 1px solid #fff;
position: relative;
transition: all 0.5s
}
.flag {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.5);
}
.main:hover li{
width: 40px;
}
.main li:hover{
width: 640px;
}