纯CSS实现IOS26液态玻璃效果 - Zony

最近发布的IOS26 Beta版，液态玻璃效果特别好看
完整实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: url('https://www.loliapi.com/acg') fixed no-repeat;
            background-size: cover;
        }

        .liquid-glass {
            width: 300px;
            height: 200px;
            border-radius: 56.00000000000001px;
            position: absolute;
            left: 50px;
            top: 50px;
            isolation: isolate;
            box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }

        .liquid-glass:focus {
            outline: none;
        }

        .liquid-glass::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: 56.00000000000001px;
            box-shadow: inset 0 0 15px -5px #000000;
            background-color: rgba(255, 255, 255, 0);
        }

        .liquid-glass::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 56.00000000000001px;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            filter: url(#glass-distortion);
            -webkit-filter: url(#glass-distortion);
        }

        .glass-text {
            position: relative;
            color: #ffffff;
            font-size: 24px;
            font-weight: 400;
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            opacity: 1;
            transform: translate(0px, 0px);
            font-family: 'Georgia', 'Microsoft YaHei', '微软雅黑', serif;
        }

        .liquid-glass.dragging {
            cursor: grabbing;
            z-index: 9999;
        }
    </style>
</head>
<body>
<div class="liquid-glass">
    <div class="glass-text">Liquid Glass</div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <defs>
        <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%">
            <feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise"/>
            <feGaussianBlur in="noise" stdDeviation="2" result="blurred"/>
            <feDisplacementMap in="SourceGraphic" in2="blurred" scale="77" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
    </defs>
</svg>
<script>
(function () {
  const el = document.querySelector('.liquid-glass');
  if (!el) return;

  let dragging = false;
  let startX = 0, startY = 0;
  let elStartLeft = 0, elStartTop = 0;

  el.addEventListener('pointerdown', function (e) {
    // Ensure we capture pointer and prevent page scrolling on touch
    el.setPointerCapture(e.pointerId);
    dragging = true;
    el.classList.add('dragging');

    const rect = el.getBoundingClientRect();
    startX = e.clientX;
    startY = e.clientY;
    // Account for page scroll so the element follows correctly when the page is scrolled
    elStartLeft = rect.left + window.scrollX;
    elStartTop = rect.top + window.scrollY;

    e.preventDefault();
  });

  window.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;

    el.style.left = (elStartLeft + dx) + 'px';
    el.style.top = (elStartTop + dy) + 'px';
  });

  window.addEventListener('pointerup', function (e) {
    if (!dragging) return;
    dragging = false;
    el.classList.remove('dragging');
    try { el.releasePointerCapture(e.pointerId); } catch (_) {}
  });
})();
</script>
</body>
</html>