CSSカラーグラデーション例：CSS3の文字カラーグラデーションの実装方法-CSSチュートリアル-php.cn

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

不言

リリース： 2018-09-08 15:40:18

オリジナル

18501 人が閲覧しました

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

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

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

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

ログイン後にコピー

rreee

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

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

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カラーグラデーション例：CSS3の文字カラーグラデーションの実装方法

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

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

.text-gradient {  
    display: inline-block;
    font-family: &#39;微软雅黑&#39;;
    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カラーグラデーション例：CSS3の文字カラーグラデーションの実装方法