CSS3 を使用してテキストストリーマーのグラデーション効果を作成する方法の詳細な例

この記事では、テキストストリーマーのグラデーション効果を作成するための css3 の作成方法を主に紹介します。一定の参考価値があります。興味のある友人は参照してください。お役に立てば幸いです。

最初にレンダリング

以下は上から始まりますコード

html パーツ

html>


    <meta>
    <title>title</title>




<p>
    </p><h4>日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。</h4>

css 部分

    <style>
        .masked h4{
            display: block;
            width: 600px;
            height: 100px;
            /*渐变背景*/
            background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
            #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
            color: transparent; /*文字填充色为透明*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
            background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
            /* 动画 */
            animation: masked-animation 4s infinite linear;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
            }
            100% {
                background-position: -100% 0;
            }
        }
    </style>

実際、これは非常に単純な例です。私は勝ちました。属性の役割についてはドキュメントを参照できるため、ここでは詳しく説明しませんが、ここでは主にアイデアについて説明します。

1. linear-gradient 属性は、テキストに線形グラデーションの背景色を追加します

2. 透明 テキストを透明に設定します

この時点で、テキストが消えて背景色だけが画面に残っていることがわかりますが、テキストは消えておらず、透明な要素がドキュメント内にまだ存在していることがわかります（まだスペースを占めています） ）。

3. 背景クリップで背景が文字に切り取られ、画面はこのようになります。

これはわかりやすいです。たとえば、透明マントを着ると透明になります。このとき、誰かがバケツに入った絵の具をあなたに注ぎ、あなたが現れました。

(これが正しい説明方法かどうかはわかりません。これについてはもっと良い説明があるだろうと漠然と感じています。皆さんにアドバイスをいただければ幸いです。)

4. アニメーション設定アニメーション。背景色の位置を変更することでこの効果を実現するため、最初に背景サイズを拡大する必要があります。そのため、背景の位置には変更の余地があります。

上記の手順は簡単です。テキストにグラデーションの背景を追加し、テキストを次のように設定します。を透明にし、テキストを画面の背景として使用し、背景色の位置の変更を制御することでこの効果を実現します。

[関連するチュートリアルの推奨事項]

1. css ビデオ チュートリアル
2. css オンライン マニュアル
3. ブートストラップ チュートリアル