html毛玻璃效果的应用,关于html:毛玻璃效果

代码来自头条号’前端小智’, 侵权删

毛玻璃

*{

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;

}

glass

document.addEventListener('mousemove',function (e) {

const glass = document.querySelector('.glass')

glass.style.left = e.offsetX+'px'

glass.style.top = e.offsetY+'px'

})