前言
毛玻璃效果相信大家都有所了解。它是一种常见的图像处理效果，它可以使图像表面看起来模糊、有一层细小的颗粒或纹理，类似于毛玻璃的质感。
想要实现毛玻璃效果，可以要使用CSS的backdrop-filter属性。这个属性可以在元素的背景和元素自身之间创建一个模糊效果。
但是我们今天在该属性的基础上，加入JS来控制毛玻璃，让它成为一种擦玻璃的效果，也就是更加灵活的毛玻璃。
效果预览
下面是我们要实现的最终效果。
HTML + CSS
首先我们看到HTML代码，这一部分比较简单。
<section>
<h2>JUEJIN ~</h2>
<div class="glass"></div>
</section>
它包含了一个section元素。在这个section元素中，有一个存在内容的h2标题元素。另外，还有一个div元素，它的class属性被设置为glass。具体的外观效果会通过下面的CSS样式来定义。
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de4571ba3e134425b3905b8e505493ed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=341630&e=jpg&b=6a7d95);
background-position: center;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
首先我们看到section元素的样式定义。我们把section定义为一个占满整个视口的区块。在section里面我们设置了元素的定位方式、显示方式、最小高度以及背景图片等，通过这些属性来使得section元素变得更加丰富。
总的来说，这里的作用是创建一个居中且铺满整个视口的区块，背景图片固定在视口中，不随元素滚动而滚动。
section h2{
font-size: 5em;
color: #fff;
pointer-events: none;
text-shadow: 0 10px 20px rgba(0, 0, 0,0.5);
}
section .glass{
position: absolute;
transform: translate(-50%,-50%);
pointer-events: none;
width: 300px;
height: 200px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
background: transparent;
backdrop-filter: blur(10px);
transition: 0.2s;
}
最后我们来看到section元素里的子元素h2和glass的样式处理。
在h2元素中设置标题的字体大小为5倍的父元素字体大小，设置标题的字体颜色为白色。并且通过 text-shadow: 0 10px 20px rgba(0, 0, 0,0.5) 来设置标题的文本阴影效果，阴影位于文字下方，颜色为半透明黑色。
在glass元素中将元素的定位方式设为绝对定位，通过 transform: translate(-50%,-50%) 将元素水平和垂直方向上分别向左和向上移动50% 的宽度和高度。然后设计好元素的宽度高度等基本属性，和上面的h2元素一样，通过 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2) 设置元素的阴影效果，阴影位于元素下方，颜色为半透明黑色，并且将元素的背景为透明。
最后就到了毛玻璃实现的关键属性了，通过 backdrop-filter: blur(10px) 设置元素的背景模糊效果，模糊半径为10px，这样就实现了一个毛玻璃效果。但是到这里还没有实现完成我们想要的效果，目前整个效果完成了70%。
JS
接下来的30% 则是通过JS来实现，相关代码如下。
<script>
const pos = document.documentElement
pos.addEventListener('mousemove',e=>{
pos.style.setProperty('--x',e.clientX+'px')
pos.style.setProperty('--y',e.clientY+'px')
})
</script>
首先，我们创建了一个指向文档根元素的变量pos，即 document.documentElement。这是整个HTML文档的根节点。
接下来，我们给pos元素添加了一个鼠标移动事件监听器，当鼠标在页面上移动时，该事件监听器会被触发。
在事件处理函数中，代码通过e.clientX和e.clientY获取到鼠标的当前坐标。e.clientX表示鼠标距离浏览器窗口左上角的水平距离，e.clientY表示鼠标距离浏览器窗口左上角的垂直距离。
接着，我们使用 pos.style.setProperty() 方法设置了两个CSS变量的值。--x表示元素的水平坐标，--y表示元素的垂直坐标。通过设置这两个CSS变量的值，可以实现元素位置的动态改变。
总结起来，这里的作用是实现一个鼠标移动时，元素位置跟随鼠标移动的效果。
总结
到这里，整个效果就实现完成了，整体而言并不难。通过CSS属性和JS结合实现这样一个特别的毛玻璃效果，一方面是为了巩固CSS的知识，另一方面是为了学习JS知识。完整代码可以前往码上掘金查看，欢迎大家在评论区里讨论~
原文链接：https://juejin.cn/post/7313911560442462208 作者：一条会coding的Shark
