开发者用纯CSS和SVG在网页实现逼真液态玻璃效果

了解 Nordify Nordify 网络上最精准的液态玻璃效果 液 态 纯 CSS，无需 WebGL 可嵌入任何网站 液 态 开源，可直接移植。 三个文件，零依赖。把它们复制到任何网站或框架中，调用一个函数，元素就变成玻璃。 import { createLiquidGlass } from "./glass/liquid-glass"; createLiquidGlass(element, { radius: 30 }); 试一试 常见问题 什么是液态玻璃？ 这是 Apple 在 2025 年推出的一种材质外观：半透明的玻璃会弯曲并反射其背后的任何内容。本研究用标准 CSS 和 SVG 将这一效果带到 Web 上，因此它能作用于任何实时页面之上。 Chrome、Edge、Arc、Brave 和 Opera 会呈现完整效果。Safari 和 Firefox 尚不支持在 backdrop-filter 内运行 SVG 滤镜，因此会得到一个干净的磨砂玻璃降级效果。 开销大的部分只发生一次：位移图被烘焙成小图片并缓存。滚动时，浏览器只会重新运行滤镜。不会重建任何内容，而且玻璃可以改变尺寸而无需重新烘焙新的位移图。 是的。它是纯 TypeScript，可作用于任何 DOM 元素，且无依赖。代码库中包含一份分步移植指南，其编写方式也能让 AI 助手照着操作。 Nordify，一家位于汉堡的软件工作室。我们构建网站、应用和 AI 工具，并在此过程中发布像这样的公开研究。这是研究 001。