先上個效果圖
下面先上**
html部分
日暮蒼山遠，天寒白屋貧。柴門聞犬吠，風雪夜歸人。
1、linear-gradient屬性給文字加乙個線性漸變的背景色
2、transparent 將文字設定為透明
這時候你會發現文字不見了，螢幕上只剩下了背景顏色,但是我們知道文字沒有消失，transparent的元素仍然存在於文件中(還佔著位)。
3、background-clip將背景裁剪為文字,螢幕就變成這樣子了。
這裡很好理解，打個比喻，你穿了隱身衣隱身了，這時候有乙個人給你潑了一桶顏料，你就現形了
(我也不知道這樣來形容合不合適，我隱約感覺這個會有更好的解釋，希望大家能不吝賜教)
4、animation設定動畫，我們這裡通過背景色position的變化來達成這個效果，所以要先將background-size放大，這樣子background-position才有變化的空間。
以上步驟說簡單點就是：給文字加乙個漸變色背景，設定文字透明，再將文字作為螢幕背景，通過控制背景色的位置變化來達到這個效果。
最後需要說一下，這個效果是我在瀏覽論壇的時候學會的，下面貼上**：
css3文字顏色漸變和文字陰影特效
這些效果只在webkit核心的瀏覽器才可以看到，其他瀏覽器需要新增一些回退 這和製作背景漸變效果是一樣的，只是將背景放到了文字上。下面是css cssh1 gradient mediascreenand webkit min device pixel ratio 0 html h1id gradie...
CSS3製作漸變文字
今天去css tricks無意間發現了標題運用漸變文字這一效果，這使的想起了webkit核心瀏覽器的一些私有屬性。而實現漸變文字這一特效可以借助webkit瀏覽器的兩個私有屬性 webkit mask image與 webkit background clip。既然稱之為webkit私用屬性，我想大...
CSS3的文字發光特效
這是一款基於純css3的文字發光特效，當我們將滑鼠滑過文字時，文字就會模擬發光動畫，展現出非常酷的發光畫面。另外，由於引用了特殊字型，所以整個文字效果看起來有著3d立體的特效，如果你的網路無法載入這些字型，可能是由於國外的這個 被牆的緣故，就像google的字型庫 被遮蔽那樣。html red bl...