玻璃状（和优雅）的文字效果

Apple Arcade的主页上有一个很酷的文字效果，一些“白色”文字呈现半透明效果。您可以透过文字看到背景颜色的一部分，这与挖空文字不同，后者会显示完整的背景颜色。在本例中，下方播放的是动态视频。这就像先模糊视频，然后通过字母显示模糊的视频一样。

这正是实际发生的情况。

以下是一个视频，您可以看到它的实际效果（即使他们在更改页面后，或者您使用不支持此效果的浏览器）：

如果您不喜欢这种效果，也没关系。本文其余部分是对其实现方式的技术探讨，并非声明何时以及如何使用它。

这里有两个主要属性必须完美配合才能实现此效果：

1. backdrop-filter
2. clip-path

backdrop-filter 属性非常易于使用。设置它，它可以过滤通过该元素看到的任何背景。

接下来，我们将文本放置在该容器中，但实际上我们会隐藏它。它只需要为了辅助功能而存在。但最终我们会通过使用文本创建剪辑路径来替换文本。没错！我们将在 <clippath></clippath> 元素内使用 SVG <text></text>，然后用它来剪辑具有 backdrop-filter 属性的整个元素。

由于某种原因（我认为这是一个错误），Chrome 的渲染效果如下：

即使它据说支持这两个属性，它也无法正确剪辑元素。我尝试使用 @supports 块，但这在这里没有帮助。看起来 Apple 的网站在其元素上有一个 .no-backdrop-blur 类（Modernizr 风格），该类在 Chrome 上设置以完全避免使用该效果。我只是让我的演示程序崩溃。也许有一天它会得到修复。

在 Safari 中看起来很正确：

而 Firefox 目前不支持 backdrop-filter，因此 @supports 块会执行其操作，并为您提供白色文本。

以上是玻璃状（和优雅）的文字效果的详细内容。更多信息请关注PHP中文网其他相关文章！