短视频app搭建，如何实现毛玻璃效果？
短视频app搭建，如何实现毛玻璃效果？
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><metaname="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:110px 20pxrgba(0,0,0,0,.5);}.glass{position:absolute;width:300px;height:200px;transform:translate(-50%,-50%);pointer-events:none;box-shadow:025px 50pxrgba(0,0,0,0,.2);background:transparent;backdrop-filter:blur(10px);/*可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明*/transition:0.2s;}</style></head><body><section><h2>glass</h2><divclass="glass"></div></section><script>document.addEventListener('mousemove',function(e){constglass=document.querySelector('.glass')glass.style.left=e.offsetX+'px' glass.style.top=e.offsetY+'px'})</script></body></html>以上就是短视频app搭建，如何实现毛玻璃效果？， 更多内容欢迎关注之后的文章