代码来自头条号'前端小智', 侵权删
<!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>