css百叶窗实现
今天利用html和css实现了一个百叶窗的效果,这个小案列设计的知识点主要是hover这个伪类、以及浮动的相结合,下面是实现的具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百叶窗效果</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#names {
text-align: center;
color: white;
font-size: 30px;
padding-top: 30px;
}
body {
width: 100%;
height: 100vh;
background-color: #3498db;
position: relative;
}
#main {
width: 1000px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#main>div {
width: 200px;
height: 400px;
float: left;
cursor: pointer;
position: relative;
transition: all 0.8s;
}
#main>div>img {
width: 100%;
height: 100%;
}
#main>div>p {
height: 30px;
width: 100%;
background-color: rgba(0, 0, 0, 0.479);
text-align: center;
font-size: 18px;
color: white;
position: absolute;
bottom: 0px;
left: 0px;
text-transform: uppercase;
transition: all 0.3s;
}
#main:hover div {
width: 100px;
z-index: 1;
opacity: 0.3;
}
#main div:hover {
width: 600px;
z-index: 100;
opacity: 1;
}
#main div:hover p {
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
letter-spacing: 10px;
}
</style>
</head>
<body>
<div id="names">百叶窗效果</div>
<div id="main">
<div>
<img src="../Imgs/byc1.jpg" alt="">
<p>autumn</p>
</div>
<div>
<img src="../Imgs/byc2.jpg" alt="">
<p>balloon</p>
</div>
<div>
<img src="../Imgs/byc3.jpg" alt="">
<p>valley</p>
</div>
<div>
<img src="../Imgs/byc4.jpg" alt="">
<p>maple</p>
</div>
<div>
<img src="../Imgs/byc5.jpg" alt="">
<p>boat</p>
</div>
</div>
</body>
</html>
下面是百叶窗的具体实现效果:
纯css百叶窗效果