互聯網給我們帶來方便的同時，也時常讓我們感到困惑。隨便搜搜就出一大堆結果，然而總是有大量的重複和錯誤。小妖發出的內容，都是自己實測過的，有問題請留言。
來活了，設計師要做一個文本漸顯的效果，我們的目標是這樣的：
這。。太簡單了，width++ && overflow: hidden; 搞定，代碼如下：
實現的效果是這樣的：
嗯。。自己也感覺有點不好交差，兩點問題：
右下角沒有漸顯的半透明效果
文字是一個個蹦出來的，不流暢啊
為了解決第一個問題，聰明的我們想到了 -webkit-mask，給右下角加一個漸變的 mask 就可以了，於是有了方式二：
由左上向右下鋪一個漸變的 mask，從 80% 到 100%，透明度從 1 漸變到 0，就有了右下角的半透明效果。第一個問題解決了！見效果：
第二個問題嘛，靈光一動，想到N種取巧的方式，只要把文本做成圖片就可以了，或者再套一層容器，外層容器 width++ && overflow: hidden; 內層容器 width: 640px; 就可以確保文本不是一個個出現的。收工！
然而，拿到頭兒那裡一看，不行！動畫，一定要注意動畫性能，改變 width 犯了動畫的大忌，導致瀏覽器不斷重繪，太卡。
萬萬沒想到，最終，我們還是如願以償地實現了設計師腦海裡的效果。只需要在方式二的基礎上更好的運用 -webkit-mask 的幾種屬性就可以了，代碼如下：
容器和 mask 的 width 都為 640，只需要改變 mask-position 就可以了，很簡單吧。
效果：
所有代碼見Demo頁：
http://xngeer.frostbelt.cn/itemcss/-webkit-mask.php
例子講完了，我們再詳細的瞭解一下 mask，mask 的屬性與 background 很相似：
-webkit-mask-image: url(mask.png);
-webkit-mask-size: 100% 100%;
-webkit-mask-position: 0 0;
-webkit-mask-origin: border(默認) padding content;
-webkit-mask-repeat: repeat round no-repeat;
也可以像 background 一樣連寫。-webkit-mask-image 也可以使用漸變：
-webkit-mask: -webkit-linear-gradient(-45deg, rgba(0,0,0,1), rgba(0,0,0,1) 80%, rgba(0,0,0,0));
大家可以自己寫個 Demo，熟悉一下各屬性的功能，像這樣：
這裡就不貼代碼啦，自己做個練習吧~
閱讀更多 frostbelt 的文章
