简单的百叶窗功能

最新推荐文章于 2022-01-26 15:34:43 发布

中二病晚期

最新推荐文章于 2022-01-26 15:34:43 发布

阅读量1.5k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/ybp1137287436/article/details/79770470

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一开始让图片如下显示：

点击一个图片时，被点击的图片显示80%，其他的都显示20%，如下：

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mainbox{
				width: 500px;
				height: 300px;
				background-color: #999999;
				position: absolute;
				overflow: hidden;        /*超出的部分隐藏*/
				
				
				/*四个方向为0  在margin：auto 可以让百叶窗居中*/
				/*ps: 我也不是很懂 直接记住的*/
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin:  auto;
				
				
			}
			.imgbox{
				width: 33.33%;
				height: 100%;
				float: left;
				transition: all 2s;      /*每个图片以2s的时间出现，不是直接出来的*/
			}
			.mainbox:hover .imgbox{
				width: 10%;                 /*被点击时图片所有显示为10%*/
			}
			.mainbox .imgbox:hover{         /*被点击时 点击的图片为80%*/
				width: 80%;
			}
		</style>
	</head>
	<body>
		<div class="mainbox">
			<div class="imgbox">
				<img src="img/01.jpg" />
			</div>
			<div class="imgbox">
				<img src="img/02.jpg" />
			</div>
			<div class="imgbox">
				<img src="img/03.jpg" />
			</div>
		</div>
	</body>
</html>