代码来自头条号'前端小智', 侵权删
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F004%2F531%2F381%2F4339f96900344574a0c8ca272a7b8f27.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622900995&t=a974c9874eb669d9c053d93f8bb139e2');
background-position: center;
background-attachment: fixed; /*规定背景图像是否固定或者随着页面的其余部分滚动。*/
background-size: cover;
overflow: hidden;
}
h2{
font-size: 5em;
color: #fff;
pointer-events: none; /*设置元素是否对指针事件做出反应*/
text-shadow: 1 10px 20px rgba(0, 0,0 ,0 ,.5);
}
.glass{
position: absolute;
width: 300px;
height: 200px;
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 0 25px 50px rgba(0, 0,0 ,0 ,.2);
background: transparent;
backdrop-filter: blur(10px);/*可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明*/
transition: 0.2s;
}
</style>
</head>
<body>
<section>
<h2>glass</h2>
<div class="glass"></div>
</section>
<script>
document.addEventListener('mousemove',function (e) {
const glass = document.querySelector('.glass')
glass.style.left = e.offsetX+'px'
glass.style.top = e.offsetY+'px'
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。