CSS3 implementiert einen Verlaufstexteffekt

Dieser Artikel teilt Ihnen hauptsächlich CSS3 mit, um einen Verlaufstexteffekt zu erzielen. Wir teilen Ihnen hauptsächlich zwei Methoden mit, in der Hoffnung, Ihnen zu helfen.

1. Methode 1: Verwenden Sie das mask-image-Attribut

, um einen Textverlaufseffekt zu erstellen

Der entsprechende HTML-Code lautet wie folgt folgt:

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

Der CSS-Code, der HTML entspricht, lautet wie folgt:

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

Wie möglich Wie aus dem CSS-Code hervorgeht, wird der Effekt neben der „Content-Content-Generierungstechnologie“ hauptsächlich durch die Verwendung des Mask-Image-Attributs erzielt, und der Inhalt ist „Gradient unter dem Webkit-Kernbrowser“.

2. Methode 2: Implementierung unter Hintergrundclip + Textfüllfarbe

Textverlaufseffekt unter Methode 2

Hier ist die Implementierung einfacher als der oben genannte. Der HTML-Code lautet wie folgt:

<h2 class="text-gradient">天赐美妞</h2>

Der CSS-Code, der HTML entspricht, lautet wie folgt:

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

Das Wichtigste und Nützliche im CSS-Code sind eigentlich die letzten drei Zeilen:

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Obwohl diese Methode relativ mehr CSS-Eigenschaften verwendet Die Struktur ist einfach, leicht zu steuern, die Auswahl und Steuerung der Farben ist präziser und leichter zu verstehen. Ich persönlich empfehle Methode zwei.

3. Fazit

Da die aktuellen Attribute text-fill-color und mask-image von Webkit-Kernbrowsern unterstützt zu werden scheinen, können die beiden Demoseiten nur unterstützt werden verwendet in Der Verlaufseffekt ist nur im Chrome-Browser oder Safari-Browser sichtbar. Einfarbig unter dem Firefox-Browser, ganz zu schweigen vom IE.

Der Textverlauf selbst ist jedoch eine dekorative Funktion, sodass wir ihn basierend auf dem Prinzip der progressiven Verbesserung tatsächlich in tatsächlichen Projekten mutig einsetzen können. Ohne die ursprünglichen Funktionen zu beeinträchtigen, können ein paar Zeilen CSS-Code für ein besseres visuelles Erlebnis unter dem immer beliebter werdenden Chrome-Browser sorgen. Warum nicht?

Verwandte Empfehlungen:

js-Implementierung zum Erhalten von Farbverlaufscode

Beispielfreigabe für Javascript-Berechnungsverlaufsfarben

Teilen von Beispielen für den Eintrag eines linearen CSS3-Verlaufs

Das obige ist der detaillierte Inhalt vonCSS3 implementiert einen Verlaufstexteffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!