Ein glasigen (und edler) Texteffekt

Es gibt einen coolen Texteffekt auf die Homepage von Apple Arcade, wobei ein "weißer" Text einen durchscheinenden Effekt zeigt. Sie können einen Teil der Hintergrundfarbe durch den Text sehen, der sich vom Aushöhlungstext unterscheidet, in dem die vollständige Hintergrundfarbe angezeigt wird. In diesem Beispiel wird das dynamische Video unten abgespielt. Es ist, als würde man zuerst das Video verwischen und dann das verschwommene Video durch die Buchstaben anzeigen.

Genau das ist tatsächlich passiert.

Hier ist ein Video, in dem Sie sehen können, wie es tatsächlich funktioniert (auch wenn sie die Seite geändert haben oder Sie einen Browser verwenden, der diesen Effekt nicht unterstützt):

Wenn Ihnen dieser Effekt nicht gefällt, spielt es keine Rolle. Der Rest dieses Artikels ist eine technische Diskussion darüber, wie er implementiert wird, und nicht eine Aussage, wann und wie er verwendet wird.

Hier sind zwei Haupteigenschaften, die perfekt koordiniert werden müssen, um diesen Effekt zu erreichen:

1. backdrop-filter
2. clip-path

backdrop-filter Eigenschaft ist sehr einfach zu bedienen. Stellen Sie es ein, es kann jeden Hintergrund filtern, den Sie durch dieses Element sehen.

Als nächstes legen wir den Text in diesen Behälter, aber wir verbergen ihn tatsächlich. Es muss nur für die Zugänglichkeit existieren. Aber schließlich ersetzen wir den Text, indem wir Clippfade mit Text erstellen. Das stimmt! Wir werden<clippath></clippath> Verwenden Sie SVG im Element<text></text> und verwenden Sie es dann, um das gesamte Element mit backdrop-filter Attribut zu kleben.

Aus irgendeinem Grund (ich denke, das ist ein Fehler) rendert Chrome wie folgt:

Auch wenn beide Eigenschaften unterstützt werden sollen, kann es die Elemente nicht korrekt bearbeiten. Ich habe versucht, @supports zu verwenden, aber das hilft hier nicht. Es sieht so aus, als hätte die Apple-Website eine .no-backdrop-blur Klasse (Modernizr-Stil) in seinen Elementen, die auf Chrome eingestellt ist, um den Effekt insgesamt zu vermeiden. Ich habe gerade mein Demo -Programm zum Absturz gebracht. Vielleicht wird es eines Tages repariert.

Sieht direkt in Safari aus:

Obwohl Firefox derzeit keinen backdrop-filter unterstützt, wird @supports -Block seine Operationen ausführen und Ihnen weiße Text geben.

Das obige ist der detaillierte Inhalt vonEin glasigen (und edler) Texteffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!