SOURCE

console 命令行工具 X clear

                    
>
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>