前端css案例-百叶窗
2025-01-22HTML
【HTML+CSS】纯CSS带你实现有趣的百叶窗效果，纯CSS实现百叶窗图片切换，非常实用哦～，附赠代码！
百叶窗效果在很多地方都有应用，是一个非常实用的效果哦，快去给你自己的网站也添加上吧～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 900px;
height: 300px;
border: 1px solid sienna;
display: flex;
justify-content: center;
overflow: hidden;
}
.b{
overflow: hidden;
transition: all 0.7s ease; /* 添加平滑过渡 */
flex-basis: 400px; /* 设置基础宽度 */
position: relative; /* 确保文字容器可以相对此元素进行绝对定位 */
transition: all 0.7s ease; /* 添加平滑过渡 */
}
.b:hover{
flex-shrink: 0;
flex-grow: 0;
}
img{
width: 400px;
height: 100%;
object-fit: cover; /* 保持图片的宽高比 */
}
.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景色 */
color: white;
padding: 10px;
text-align: center;
opacity: 0;
transition: opacity 0.7s ease;
}
.b:hover .caption {
opacity: 1;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<img src="https://img1.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
<div class="caption">图片上的文字</div>
</div>
<div class="b">
<img src="https://gbres.dfcfw.com/Files/picture/20240903/EE8419EEF508C6D8F13819AD3A198738_w2241h1494.jpg" alt="">
<div class="caption">图片上的文字</div>
</div>
<div class="b">
<img src="https://i0.hdslb.com/bfs/archive/1ee7db6b30b0acdddaf09a3094e50043e0f1ba4c.jpg" alt="">
</div>
<div class="b">
<img src="https://img0.baidu.com/it/u=3245016253,4114859439&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
</div>
<div class="b">
<img src="https://img1.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
</div>
<div class="b">
<img src="https://img1.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
</div>
<div class="b">
<img src="https://img1.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
</div>
<div class="b">
<img src="https://img1.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
</div>
</div>
</body>
</html> 很赞哦！ ()
