css color gradient example: implementation method of css3 text color gradient

When we browse the web, we sometimes see that the color of some text is in the form of dynamic gradient or static gradient. So, how can we achieve the gradient effect of text color in the front-end web page? This article will give Let’s introduce the effect of css3 text color gradient in css color gradient application.

There are many ways to achieve css3 text color gradient. Here I will introduce to you

css3 text color gradient method one: realize css text dynamics through the animation properties of css3 Color gradient

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

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);
    }
}

The effect is as follows (the screenshot is a static picture, but it is actually dynamic@o@, so just compare it^-^)

Css3 text color gradient method two: achieve the static effect of text color gradient through the mask-image attribute

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

The effect is as follows:

As can be seen from the CSS code, in addition to "content content generation technology", the effect is mainly achieved by using the mask-image attribute.

#CSS3 text color gradient method three: Use the background-clip text-fill-color attribute to achieve the static effect of text color gradient.

.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)));
}

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

The effect is as follows:

Although this method uses relatively more CSS properties, it has a simple structure and is easy to control, and the color selection is The control is also more precise and easier to understand.

This article ends here. If you want to know more about the related properties of css color gradient, you can refer to css manual.

The above is the detailed content of css color gradient example: implementation method of css3 text color gradient. For more information, please follow other related articles on the PHP Chinese website!