console
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
* {
line-height: 1.5;
}
body {
margin: 0;
height: 100vh;
}
.glass-filter {
position: absolute;
height: auto;
width: auto;
min-width: 24px;
min-height: 24px;
transform: translate(0px, 0px) scale(0.96);
transition: transform 0.15s ease-out;
border-radius: 24px;
overflow: visible;
backdrop-filter: url(#lg-dist) saturate(223%);
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.602187px 3.01094px -0.25px, rgba(0, 0, 0, 0.13) 0px 2.28853px 11.4427px -0.5px, rgba(0, 0, 0, 0.37) 0px 10px 50px -0.75px;
}
.glass-mask {
position: absolute;
inset: 0px;
z-index: 0;
border-radius: 24px;
pointer-events: none;
opacity: 1;
display: block;
box-sizing: border-box;
mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px);
box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 0.5px inset, rgba(255, 255, 255, 0.25) 0px 1px 3px inset, rgba(0, 0, 0, 0.35) 0px 1px 4px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 33%, rgba(255, 255, 255, 0.4) 66%, rgba(255, 255, 255, 0) 100%);
}
.glass-specular {
width: 370px;
height: 40px;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: red;
}
</style>
<body>
<div class="glass-filter">
<div class="glass-specular">
啦啦啦德玛西亚
</div>
<div class="glass-mask"> </div>
<svg width="370" height="24" viewBox="185 12 370 24" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:-9999px;left:-9999px;pointer-events:none;will-change:filter;transform:translateZ(0)">
<filter id="lg-dist">
<feImage href="data:image/svg+xml,<?xml version=' 1.0 ' encoding='UTF-8'?> <svg width='740' height='100' viewBox='185 25 370 50' xmlns='http://www.w3.org/2000/svg'> <rect x='185' y='25' width='370' height='50' rx='24' fill='rgb(0, 0, 0)' /> </svg>"
x="0%" y="0%" width="100%" height="100%" result="thing9"></feImage>
<feImage href="data:image/svg+xml,<?xml version=' 1.0 ' encoding='UTF-8'?> <svg width='740' height='100' viewBox='185 25 370 50' xmlns='http://www.w3.org/2000/svg'> <rect x='185' y='25' width='370' height='50' rx='24' fill='rgba(255, 255, 255, 0.12941176470588237)' style='filter:blur(17px)' /> </svg> "
x="0%" y="0%" width="100%" height="100%" result="thing0"></feImage>
<feImage href="data:image/svg+xml,<?xml version=' 1.0 ' encoding='UTF-8'?> <svg width='740' height='100' viewBox='185 25 370 50' xmlns='http://www.w3.org/2000/svg'> <rect x='185' y='25' width='370' height='50' rx='24' fill='rgb(0, 0, 0)' /> </svg>"
x="0%" y="0%" width="100%" height="100%" result="thing"></feImage>
<feImage href="data:image/svg+xml,<?xml version=' 1.0 ' encoding='UTF-8'?> <svg width='740' height='100' viewBox='185 25 370 50' xmlns='http://www.w3.org/2000/svg'> <defs> <linearGradient id='gradient1' x1='0%' y1='0%' x2='100%' y2='0%'> <stop offset='0%' stop-color='#000'/> <stop offset='100%' stop-color='#00F'/> </linearGradient> <linearGradient id='gradient2' x1='0%' y1='0%' x2='0%' y2='100%'> <stop offset='0%' stop-color='#000'/> <stop offset='100%' stop-color='#0F0'/> </linearGradient> </defs> <rect x='185' y='25' width='370' height='50' rx='24' fill='#7F7F7F'/> <rect x='185' y='25' width='370' height='50' rx='24' fill='#000'/> <rect x='185' y='25' width='370' height='50' rx='24' fill='url(#gradient1)' style='mix-blend-mode: screen'/> <rect x='185' y='25' width='370' height='50' rx='24' fill='url(#gradient2)' style='mix-blend-mode: screen'/> <rect x='185' y='25' width='370' height='50' rx='24' fill='rgba(127, 127, 127, 0.7333333333333333)' style='filter:blur(20px)'/> </svg>"
x="0%" y="0%" width="100%" height="100%" result="thing2"></feImage>
<feGaussianBlur stdDeviation="0.9" in="SourceGraphic" result="preblur"></feGaussianBlur>
<feDisplacementMap in2="thing2" in="preblur" scale="-46.7" xChannelSelector="B" yChannelSelector="G"></feDisplacementMap>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="disp1"></feColorMatrix>
<feDisplacementMap in2="thing2" in="preblur" scale="-50" xChannelSelector="B" yChannelSelector="G"></feDisplacementMap>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="disp2"></feColorMatrix>
<feDisplacementMap in2="thing2" in="preblur" scale="-53.3" xChannelSelector="B" yChannelSelector="G"></feDisplacementMap>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="disp3"></feColorMatrix>
<feBlend in2="disp2" mode="screen"></feBlend>
<feBlend in2="disp1" mode="screen"></feBlend>
<feGaussianBlur stdDeviation="0"></feGaussianBlur>
<feBlend in2="thing0" mode="screen"></feBlend>
<feBlend in2="thing9" mode="multiply"></feBlend>
<feComposite in2="thing1" operator="in"></feComposite>
</filter>
</svg>
</div>
<script>
window.onload = () => {
const container = document.querySelector('.glass-filter')
document.onmousemove = e => {
container.style.left = e.x - 185 + 'px'
container.style.top = e.y - 25 + 'px'
}
}
</script>
<div>
<img src="https://img0.baidu.com/it/u=133135383,1058619707&fm=253&app=138&f=JPEG?w=800&h=1428" />
</div>
</body>
</html>