Contoh terperinci tentang cara mencipta kesan kecerunan penstrim teks menggunakan CSS3-tutorial css-php.cn

Contoh terperinci tentang cara mencipta kesan kecerunan penstrim teks menggunakan CSS3

PHP中文网

Lepaskan： 2018-11-06 15:49:04

ke hadapan

4820 orang telah melayarinya

Artikel ini terutamanya memperkenalkan kaedah pengeluaran kesan kecerunan strim dengan CSS3 Ia mempunyai nilai rujukan tertentu. Saya harap ia akan membantu anda.

Pertama pemaparan

Berikut ialah kod

Bahagian HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

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

</body>
</html>

Salin selepas log masuk

Bahagian 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>

Salin selepas log masuk

Sebenarnya, ini adalah contoh yang sangat mudah, saya tidak akan menerangkan secara terperinci tentang peranan atribut di sini kerana dokumentasi boleh didapati di sini.

1 Atribut kecerunan linear menambah warna latar belakang kecerunan linear pada teks

2 lutsinar Tetapkan teks kepada lutsinar

Pada masa ini anda akan mendapati bahawa teks telah hilang, dan hanya warna latar belakang yang tinggal pada skrin, tetapi kami ketahui bahawa teks tidak hilang, telus Elemen masih wujud dalam dokumen (masih mengambil ruang).

3. Klip latar belakang memotong latar belakang menjadi teks, dan skrin akan kelihatan seperti ini.

Ini mudah difahami Untuk menggunakan analogi, anda memakai jubah halimunan dan menjadi halimunan Pada masa ini, seseorang menuangkan baldi cat pada anda dan anda muncul

(Saya tidak tahu sama ada ini cara yang betul untuk menerangkannya. Saya rasa samar-samar akan ada penjelasan yang lebih baik untuk perkara ini. Saya harap semua orang boleh memberi saya nasihat)

4. Kami mencapai kesan ini di sini dengan menukar kedudukan warna latar belakang, jadi kami perlu membesarkan saiz latar belakang supaya kedudukan latar belakang mempunyai ruang untuk diubah. .

Ringkasnya, langkah di atas ialah: tambah latar belakang kecerunan pada teks, tetapkan teks menjadi lutsinar, kemudian gunakan teks sebagai latar belakang skrin, dan capai kesan ini dengan mengawal perubahan kedudukan warna latar belakang.

【Tutorial berkaitan yang disyorkan】

1 Tutorial video CSS
2 Manual dalam talian CSS
3. tutorial bootstrap