css实现图片放大高斯模糊

最新推荐文章于 2024-04-11 15:07:58 发布

BOM_BOM_BOM

最新推荐文章于 2024-04-11 15:07:58 发布

阅读量331

点赞数

文章标签： css html vue.js

本文链接：https://blog.csdn.net/BOM_BOM_BOM/article/details/121918890

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.back{
			width: 100%;
			height: 400px;
			filter: blur(60px);
			transform: scale(3);
			overflow: hidden;
			-webkit-transform: scale(1.2);
			 -moz-transform: scale(1.2);
			-o-transform: scale(1.2);
		}
		.img{
			position: absolute;
			z-index: 100;
			margin-top: 100px;
			margin-left: 50px;
		}
	</style>
	<body>
		<div>
			<img src="kb-picture.png" class="img" alt="">
			<div style="width: 100%;height: 400px;overflow: hidden;">
				<img src="kb-picture.png" class="back" alt="">
			</div>
		</div>
	</body>
</html>