So erstellen Sie mit einer Maske in CSS einen verblassenden Effekt auf den Text

Um einen Textverblassungseffekt mithilfe von CSS-Maske zu erstellen, müssen Sie das Masken-Image-Attribut verwenden, um mit linearen Gradienten kombiniert zu werden. 1. Verwenden Sie Lineargradient als Maskenbild, weiße Mittel vollständig sichtbar und schwarz, beispielsweise versteckt, um das Verblassen von links nach rechts zu erreichen: -Webkit-Maskenbild: Linear-Gradient (nach rechts, weiß 0%, schwarz 100%); Maskenbild: linear Gradient (nach rechts, weiß 0%, schwarz 100%); 2. Wenden Sie die Klasse auf HTML-Elemente wie

; 3.. Sie können die Gradientenrichtung und den Bereich anpassen, z. B. von oben nach unten mit dem Boden, oder die verblassende Seite der sichtbaren Seite ist in der Mitte zu sehen, um schwarze 0%, weiß 30%, weiß 70%, schwarz 100%zu verwenden. 4. Um die Browserkompatibilität zu gewährleisten, müssen Sie die Webkit -Prefix hinzufügen, um Webkit -Kernel -Browser wie Safari zu unterstützen. 5. Sie können die Maskenposition ändern und den Übergang hinzufügen, um das Gleiten während des schwebenden Animationseffekts zu erkennen, z. B. wenn Sie schweben: Wenn Sie die Maskenposition von 0 0 auf 100% 0 ändern. Diese Methode ist effizient und zerstört das Layout nicht und ist eine empfohlene Lösung, um das Verblassen von Text zu realisieren.

Um einen verblassenden Effekt auf den Text mit einer Maske in CSS zu erzeugen, können Sie die mask-image Eigenschaft mit einem Gradienten verwenden. Diese Technik wechselt nach und nach den Text von vollständig sichtbar zu transparent, typischerweise von links nach rechts, oben nach unten oder über mehrere Richtungen hinweg.

Hier erfahren Sie, wie man es Schritt für Schritt macht:

1. Verwenden Sie mask-image mit einem linearen Gradienten

Der Schlüssel besteht darin, einen linear-gradient als Maske anzuwenden, in dem black (oder transparente) Teile des Textes und white (oder undurchsichtig) sie enthüllen. In CSS -Masken zeigt Weiß Inhalte, schwarze sie verbirgt ihn und die partielle Transparenz von Grausteuerung.

 .fading-text {
  Schriftgröße: 2Rem;
  Schriftgewicht: fett;
  Farbe: #000;

  / * Erstellen Sie eine von links nach rechts verblassende *///
  -Webkit-Masken-Image: linear-Gradient (nach rechts, schwarz 0%, weiß 100%);
  Maskenbild: linear Gradient (nach rechts, schwarz 0%, weiß 100%);

  / * Optional: Vermasste verhindern, dass Maske *////
  -Webkit-Masken-Repeat: No-Repeat;
  Masken-Repeat: No-Repeat;

  / * Stellen Sie sicher, dass die Maskengröße den Text abdeckt */
  -Webkit-Maskengröße: 100% 100%;
  Maskengröße: 100% 100%;
}

Aber warten Sie - dieses Beispiel ist rückwärts. Denken Sie daran: In Masken weiß = sichtbar , schwarz = versteckt . Um nach rechts zu verblassen , möchten Sie, dass der Gradient von Weiß nach Schwarz wechselt.

✅ Richtige Version:

 .fading-text {
  Schriftgröße: 2Rem;
  Schriftgewicht: fett;
  Farbe: #000;

  / * Verblassen von links (sichtbar) nach rechts (transparent) */
  -Webkit-Masken-Image: linear Gradient (nach rechts, weiß 0%, schwarz 100%);
  Maskenbild: linear Gradient (nach rechts, weiß 0%, schwarz 100%);

  -Webkit-Masken-Repeat: No-Repeat;
  Masken-Repeat: No-Repeat;
  -Webkit-Maskengröße: 100% 100%;
  Maskengröße: 100% 100%;
}

2. Bewerben Sie sich auf ein HTML -Element

 <div class = "fading-text">
  Dieser Text verblasst nach rechts.
</div>

3. Einstellen Sie die Richtung und den Bereich des Fade ein

Sie können die Richtung ändern oder den Verblassen auf einen Teil des Textes begrenzen.

• Oben nach unten verblassen :

   -Webkit-Masken-Image: linear-Gradient (bis unten, weiß 0%, schwarz 80%);
  Maskenbild: linear Gradient (bis unten, weiß 0%, schwarz 80%);

• Zentrum zu Kanten verblassen (in der Mitte sichtbarer Text, verblasst beide Seiten) :

   -Webkit-Masken-Image: Linear-Gradient (nach rechts, schwarz 0%, weiß 30%, weiß 70%, schwarz 100%);
  Maskenbild: linear Gradient (nach rechts, schwarz 0%, weiß 30%, weiß 70%, schwarz 100%);

4. Browserunterstützung und Präfixe

Fügen Sie immer das -webkit- -Präfix für eine breitere Kompatibilität ein, insbesondere für Safari und ältere Browser.

 -Webkit-Masken-Image: linear Gradient (nach rechts, weiß 0%, schwarz 100%);
Maskenbild: linear Gradient (nach rechts, weiß 0%, schwarz 100%);

HINWEIS: Firefox unterstützt mask-image ohne Präfix, aber Webkit-basierte Browser (wie Safari) erfordert -webkit-mask-image .

5. Optional: Animieren Sie den Verblassen

Sie können sogar die Maskenposition für einen Gleit -Enthüllungseffekt animieren:

 .fading-text {
  -Webkit-Masken-Image: linear Gradient (nach rechts, weiß 30%, schwarz 100%);
  Maskenbild: linear Gradient (nach rechts, weiß 30%, schwarz 100%);
  -Webkit-Maskenposition: 0 0;
  Maskenposition: 0 0;
  -Webkit-Maskengröße: 200% 100%;
  Maskengröße: 200% 100%;
  Übergang: -Webkit-Maskenposition 0,4s Leichtigkeit;
}

.fading-text: hover {
  -Webkit-Maskenposition: 100% 0;
  Maskenposition: 100% 0;
}

Dies führt zu einem "umfassenden" Effekt auf den Schwebedruck.

---

Zusamenfassend:

• Verwenden Sie mask-image mit linear-gradient
• Weiß = sichtbar, schwarz = versteckt
• Kombinieren Sie -webkit- -Präfix für die Kompatibilität
• Passen Sie die Gradientenrichtung und Farbstopps ein, um den Verblassen zu steuern

Grundsätzlich ist es eine saubere, leistungsfähige Art, Text zu verblassen, ohne das Layout zu beeinflussen oder zusätzliche Elemente zu verwenden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit einer Maske in CSS einen verblassenden Effekt auf den Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!