實例詳解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屬性為文字加上一個線性漸變的背景色 span>

2、transparent 將文字設為​​透明

這時候你會發現文字不見了，螢幕上只剩下了背景顏色,但是我們知道文字沒有消失，transparent的元素仍然存在於文檔中(還佔著位)。

3、background-clip將背景裁剪為文字,螢幕就變成這樣子了。

這裡很好理解，打個比喻，你穿了隱身衣隱身了，這時有個人給你潑了一桶顏料，你就現形了

(我也不知道這樣來形容合不合適，我隱約感覺這個會有更好的解釋，希望大家能不吝賜教)

4、animation設定動畫，我們這裡透過背景色position的變化來達成這個效果，所以要先將background-size放大，這樣子background-position才有變化的空間。

以上步驟說簡單點就是：給文字加一個漸變色背景，設定文字透明，再將文字當作螢幕背景，透過控制背景色的位置變化來達到這個效果。

【相關教學推薦】

1. css影片教學
2. css線上手冊
3. bootstrap教學