CSSカラーグラデーション例：CSS3の文字カラーグラデーションの実装方法

Web を閲覧すると、テキストの色が動的グラデーションまたは静的グラデーションになっていることがあります。では、この記事では、どのようにしてテキストの色のグラデーション効果を実現できるでしょうか。 CSSカラーグラデーションアプリケーションでのCSS3テキストカラーグラデーションの効果を紹介します。

CSS3のテキストカラーグラデーションを実装する方法はたくさんあります

CSS3のテキストカラーグラデーションの方法1つを紹介します:css3のアニメーションプロパティを通じてCSSテキストの動的カラーグラデーションを実現します

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

rreee

その効果は次のとおりです。以下に続きます（傍受 静的な画像ですが、実際は動的な@o@なので比較してみましょう^-^）

Css3のテキストカラーグラデーションの方法2：マスクイメージ属性を使用して、静的な効果を実現します文字色のグラデーション

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

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

効果は以下の通りです:

CSS コードから分かるように、効果は主に「コンテンツコンテンツ生成技術」に加えて、mask-image 属性を使用することによって実現されます。 。

Css3 テキスト カラー グラデーションの方法 3: テキスト カラー グラデーションの静的効果を実現するには、background-clip + text-fill-color 属性を使用します。

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

rree

その効果は次のとおりです:

この方法は比較的多くの CSS 属性を使用しますが、構造が単純で、色の選択と制御もより正確で、簡単です。理解すること。

この記事はここで終わります。CSS カラー グラデーションの関連プロパティについて詳しく知りたい場合は、 CSS マニュアル を参照してください。

以上がCSSカラーグラデーション例：CSS3の文字カラーグラデーションの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。