拖动对比图纯css

最新推荐文章于 2024-06-05 12:42:29 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-06-05 12:42:29 发布

阅读量232

点赞数

分类专栏：特效

原文链接：https://blog.csdn.net/qq_43624878/article/details/115147407?utm_medium=distribute.pc_category.none-task-blog-hot-6.nonecase&dist_request_id=&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-6.nonecase

版权

特效专栏收录该内容

31 篇文章 2 订阅

订阅专栏

写好样式定位，主要步骤

overflow: hidden;
resize: horizontal;

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>拖动 对比图</title>
	<style>
		.container {
			position: relative;
			display: inline-block;
			width: 400px;
			height: 300px;
			overflow: hidden;
		}

		.container .out {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 50%;
			max-width: 100%;
			/* 拖动效果 分两步 溢出隐藏overflow，并设置拖动行为，但如果不设置这一行拖动行为仍然可以发生在父元素之外 */
			overflow: hidden;
			resize: horizontal;
		}

		.container img {
			display: block;
			height: 100%;
		}
		/* 右下角小三角 */
		.container .out::before {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 12px;
			height: 12px;
			padding: 1px;
			background: linear-gradient(-45deg, white 50%, transparent 0);
			background-clip: content-box;
			/* 鼠标状态成左右箭头式拖动状态 */
			cursor: ew-resize;
		}
	</style>
</head>

<body>
	<div class="container" title="拖动右下角可自由查看">
		<div class="out">
			<img src="1.png" alt="这是表层图" />
		</div>
		<img src="2.png" alt="这是底层图" />
	</div>
</body>

</html>