說實話，css3越來越強大，使用css也可以做越來越多意想不到的效果。
今天，見到有人用css3實現了ps的蒙版效果，如下所示：
這個動畫，其實也並不複雜。它使用background-clip實現了文字蒙版的效果，然後結合了背景的animation實現了如上圖所示的文字蒙版動畫。
常見的有兩種，一種是圖形的，另一種是文字的。
這裡要使用的到時clip-path，它的作用是根據你指定的圖形的輪廓來保留剩餘的區域，如果你制定的圖形是圓形，那麼剩餘的就是個圓形。
它有個特點就是，你可以把你的盒子模型定義為不規則的圖形。
我們都知道原來的css只允許我們把元素定義成矩形和正方形，又可以在矩形區域內巢狀其他的矩形或者正方形元素。而現在我們可以定義乙個不規則的圖形，然後在這個不規則的圖形內定義其他的元素。
這樣說可能還是有點兒含糊。假如你在乙個元素內填充滿文本，以前只能沿著矩形或者正方形的邊緣填充，而現在使用clip-path可以使文字沿著不規則的圖形的邊緣填充。
具體可參考文字環繞
接著說圖形蒙版，有兩種實現：
一種是保留剪下圖形輪廓內的內容，可以參考shpape-masking。
文字蒙版使用的使css3中的backgorund-clip，這個屬性支援border-box，padding-box，content-box和text等屬性，具體使用可參考mdn background-clip。
它和clip的效果類似，都是剪下後剩餘部分的內容，text這個屬性值比較特殊，針對的是元素內的文字，其他的針對的是元素內內容的顯示區域。
背景的動畫很簡單就是乙個animation動畫。
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...