Beispiel für einen CSS-Farbverlauf: Implementierungsmethode für den CSS3-Textfarbverlauf

Wenn wir im Internet surfen, sehen wir manchmal, dass die Farbe eines Texts in Form eines dynamischen Farbverlaufs oder eines statischen Farbverlaufs vorliegt. Wie können wir also den Farbverlaufseffekt der Textfarbe auf der Front-End-Webseite erzielen? In diesem Artikel stellen wir den Effekt des CSS3-Textfarbverlaufs in der CSS-Farbverlaufsanwendung vor.

Es gibt viele Möglichkeiten, den Farbverlauf von CSS3-Texten zu implementieren Farbverlauf

<h2>文字颜色渐变</h2>

rrreeDer Effekt ist wie folgt (der Screenshot ist ein statisches Bild, aber es ist tatsächlich dynamisch@o@, also vergleichen wir es^-^)

Css3-Textfarbverlaufsmethode zwei: Erzielen Sie den statischen Effekt des Textfarbverlaufs durch das Maskenbildattribut

h2{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

rrreeDer Effekt ist wie folgt:

Wie aus dem CSS-Code ersichtlich ist, wird der Effekt neben der „Content-Content-Generierungstechnologie“ hauptsächlich durch die Verwendung des Mask-Image-Attributs erzielt.

Css3-Textfarbverlaufsmethode drei: Verwenden Sie die Attribute „Hintergrundclip“ + „Textfüllfarbe“, um den statischen Effekt des Textfarbverlaufs zu erzielen.

<h2 class="text-gradient" data-text="文字颜色渐变">文字颜色渐变</h2>

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 5em;
    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)));
}

Der Effekt ist wie folgt:

Obwohl diese Methode relativ mehr CSS-Attribute verwendet, hat sie eine einfache Struktur und ist leicht zu steuern , und die Farbauswahl ist auch präziser und verständlicher.

Dieser Artikel endet hier. Wenn Sie mehr über die zugehörigen Eigenschaften des CSS-Farbverlaufs erfahren möchten, können Sie sich das

CSS-Handbuch

ansehen.

Das obige ist der detaillierte Inhalt vonBeispiel für einen CSS-Farbverlauf: Implementierungsmethode für den CSS3-Textfarbverlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!