h5蒙版

最新推荐文章于 2023-03-15 11:47:22 发布

xcj888it

最新推荐文章于 2023-03-15 11:47:22 发布

阅读量807

点赞数

分类专栏： m h5

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>蒙版\|\|遮罩</title>
	<style>
	.box1 {
	width: 830px;
	height: 470px;
	border: 1px solid #000;
	position: relative;
	overflow: hidden;
	}
	.mengban{
	width: 100%;
	height: 200px;
	background-color: rgba(255,0,0,.5);
	position: absolute;
	bottom: 0;
	transition: all linear 1s;
	}
	.box1:hover .mengban{
	bottom: -200px;
	}
	</style>
	</head>
	<body>

	<div class="box1">
	<img src="img/watchingU.jpg" alt="pic"/>
	<div class="mmengban>XX东西 XX钱...</div>
	</div>

	</body>
	</html>