CSS3のtext-fill-colorプロパティの詳細な説明

text-fill-color とは何を意味しますか?文字通りの意味から言えば、「テキストの塗りつぶし色」を意味しますが、実際にはオブジェクト内のテキストの塗りつぶし色も設定し、色の効果に非常に似ています。 text-fill-color プロパティと color プロパティの両方を同時に設定した場合、text-fill-color が color 値を上書きします。

text-fill-color は CSS3 の新しい属性なので、CSS3 の新しい属性となると、誰もがその互換性の影響について必ず質問するでしょう。 ?まあ、互換性が非常に悪いとしか言いようがありません。WebKit カーネルを搭載したブラウザにのみ有効です。。お気の毒に！！互換性は低いですが、流れるようなテキストや中空のテキストなど、非常にクールなテキスト効果を生み出すことができます。

流れるようなテキストを作成するには、text-fill-color を使用するだけでは不十分です。アニメーション効果を実現するには、CSS3 アニメーションも組み合わせる必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        *{マージン: 0;パディング: 0;}
        ._borderWrap{
            幅: 180ピクセル;
            高さ: 150px;
            位置: 絶対;
            左: 23%;
            上位: 25%
        }
        。_国境{
            行の高さ: 145px;
            テキスト配置: 中央;
            フォントサイズ: 40px;
            フォントの太さ: 太字;
            -webkit-テキストの塗りつぶし色: 透明;
            背景画像: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            背景サイズ: 200%,100%;
            -webkit-background-clip: テキスト;
            -webkit-animation: 単語 5s 線形無限;
        }
        @keyframes 単語 {
            0%{背景位置: 0 0}
            100%{背景位置: -100% 0}
        }
    </スタイル>
</head>
<本文>
        <div class="_borderWrap">
            <div class="_border">あなたの名前</div>
        </div>
</本文>
</html>

効果画像:

「あなたの名前」は私が作成した流れるようなテキストですが、スクリーンショットは静的です。動的な効果を確認したい場合は、自分でコードを実行する必要があります。

フローティングテキストを作成する際には、いくつかの重要なポイントがあることに注意してください。text-fill-color は通常は透明に設定され、background-image とグラデーションカラーを使用してテキストの背景色を設定し、background-clip を使用してテキストのキャプチャを実現し、background-size を使用して背景を拡大することで、アニメーションを使用するときにアニメーション効果を実現できます。

要約する

上記は、私が紹介した CSS3 の text-fill-color 属性です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Zen HTML要素 Zenコーディングを使用する友人はそれを収集できます

>>: docker を使用して hbase をデプロイする方法