犀利的background-clip:text，實現K歌字幕效果

　　

　　今天學到了一個新的CSS3屬性，更准確的說是屬性值，那就是background-clip:text。利用此屬性值可以制作出很神奇的效果。可惜只有chrome支持，不過今天可以先來玩玩這個屬性。

　　先來介紹下background-clip吧，它的作用是對背景圖片進行裁剪，取值有content-box|padding-box|border-box，即對哪一個盒子之外的背景進行裁剪。看下面的例子就明白了：

美女

content-box
padding-box
border-box

 

　　以上三個取值很自然可以想到，但它還有另外一個取值有點讓人驚艷，那就是text，它可以把文本內容之外的背景給裁剪掉。比如我們把上面的例子中寫上文字：

美女

content-box
padding-box
border-box
text

 

　　背景內容只裁剪出了文字中的，是不是很神奇~不過這里需要和另外一個css3屬性配合使用，它就是-webkit-text-fill-color: transparent; 它是用來設置文字的填充色的，作用和指定color是一樣的，不過它有一個取值非常有用：transparent，可以把文字填充色設為透明，這樣的話就可以漏出后面背景的顏色了，也就是“文字鏤空”效果。

     這樣一來，要實現一個漸變色文字就很容易了，我們只需要用css3的漸變設置背景色即可，讓后讓文字來把背景給鏤空顯示出來。非常簡單，這里有一個例子： http://trentwalton.com/bgclip/

     這里我又想到了一個實際用途，那就是實現K歌的字幕效果，文字顏色隨進度而變化，需要做到同一個字上面有不同的顏色，像下面這張圖：

　　

　　以前我們要做這樣的效果，可能需要兩個元素來，重疊起來，不斷改變上面的元素的寬度來慢慢遮住下面，以此來模擬一種進度效果，如下是用兩個元素實現的：

一盞離愁 孤單佇立在窗口

一盞離愁 孤單佇立在窗口

　　這樣做有幾個缺陷：

     1. 一段文字需要寫兩遍，用兩個元素

     2. 用戶想要復制歌詞時，無法完全選中這一行的文字。（因為確實不是同一行）

　　既然我們可以用文字鏤空出背景色來了，要實現這個效果也就相當容易了，只需一個div，css代碼如下：

@-webkit-keyframes loop{
     0%{background-position: -800px 0;}
     100%{background-position: -0 0;}
}
.text2{
     width: 800px;
     height: 78px;
     line-height: 78px;
     font-size: 40px;
     font-family: '微軟雅黑';
     font-weight: bold;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-color: red;
     background-image:url(bg.jpg);
     background-repeat:no-repeat;
     background-position: -800px 0;
     -webkit-animation:loop 10s linear infinite;
}

　　看效果：

一盞離愁 孤單佇立在窗口

 　　可以很好解決上面的兩個問題。當然用css3的方式也有問題的，那就是我們喜聞樂見的，不！兼！容！所以這里也只能是玩一玩了，當做一個思路。