百叶窗demo 纯css实现

最新推荐文章于 2024-10-04 00:46:18 发布

m0_64649566

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量102

点赞数 2

文章标签：前端 css

本文链接：https://blog.csdn.net/m0_64649566/article/details/141098119

版权

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./css/百叶窗.css">
	</head>
	<body>
		<div class="banner">
			<div class="box"><img src="./img/22.jpg" alt=""></div>
			<div class="box"><img src="./img/素材 (3).jpg" alt=""></div>
			<div class="box"><img src="./img/素材 (4).jpg" alt=""></div>
			<div class="box"><img src="./img/素材 (5).jpg" alt=""></div>
			<div class="box"><img src="./img/素材 (1).jpeg" alt=""></div>
			<div class="box"><img src="./img/素材 (2).jpg" alt=""></div>
			<div class="box"><img src="./img/素材 (1).jpg" alt=""></div>
			
			
			
		</div>
	</body>
</html>

css部分


img{
	background-size: cover;
}
*{
	/* 初始化取消内外边距 */
	margin: 0%;
	padding: 0;
	
}
body{
	background-color: aqua;
	/* 弹性布局加上水平居中 */
	
	display: flex;
	justify-content: center;
}
.banner{
	width: 900px;
	height: 300px;
	/* 相对定位 */
	
	position: relative;
	top: 200px;
	/* 溢出隐藏 */
	overflow: hidden;
	/* 弹性布局 ，水平居中*/
	display: flex;
	justify-content: center;
}
.box{
	overflow: hidden;
	/* 动画过度 */
	transition: 0.7s;

}
/* 这两个属性还没掌握记得百度搜一下 */
.box:hover{
	flex-shrink: 0;
	/* 收缩 */
	/* 扩展比率 */
	flex-grow: 0;
}

img{
	width: 400px;
}

效果图