巧用CSS的MASK濾鏡_基礎教學

Mask濾鏡可以為網頁上的HTML元件物件作出一個矩形遮罩，關於什麼是遮罩?如果你用過Flash中的遮罩，你就會知道了，就是那個樣子了。其實對於遮罩你也可以這樣來理解，相當於用一塊有色布把物件蓋起來，但內容卻被挖起來了。若你還不明白，就看下面的圖片再聽我給你細說。

　　圖1　mask濾鏡效果1

　　　圖1　mask濾鏡效果1

　　在上面這mask濾鏡中用這麼深的顏色，主要是讓你能清楚看出效果來。讓我們來看看mask濾鏡的參數： 它只有一個參數Color，即遮罩的顏色 以#RRGGBB 格式的顏色值。你只要在DW3中給它選擇適合的顏色就OK了，如上面的mask濾鏡程式碼就是：.mask1 { filter:mask(color=#00ff00) }，在下面的例子中你會看到，其實濾鏡的顏色不是主要的，關鍵的倒是背景的顏色。
　　下面我們用mask濾鏡做幾個特效：
　　1、五彩繽紛的文字

B.濾鏡效果2

　　上面這種效果怎麼樣，還不錯吧！有點象圖像是不是？這就是mask濾鏡的效果。這裡用了個白色濾鏡，其程式碼是：.mask1 { filter:mask(color=#ffffff) }。五彩繽紛的文字顏色其實就是背景的顏色。其製作方法也很簡單，就是插入一個1*1的表格，給表格加上多彩色的背景，在表格中輸入文字，給單元格加載一個mask 濾鏡，就做好了，不難吧？ ！
　　2、探照燈動畫效果
　　下面的這種探照燈效果，用Flash做都要費點神，想不到用CSS濾鏡卻也能做出來！由於探照燈效果是動態的，我只能抓兩張過程圖片給你看看，要看動態效果，那你就根據我講的動手做一個或去我家（http:/fym888.go.163.com）看。

　　圖3　探照燈動畫效果1

　　圖5　層屬性面板

　　我這裡　　我這裡的父層是“Layer4”，我在這裡把整個父層都作為顯示窗口，也就是當子層移動到父層時就可見，在父層之外不可見。
　　3、我們在子層上插一個背景透明的圓形圖片，這裡用圓圖形的目的主要是探照燈光的投影是個似圓形，另外圓外的圖象部分必須透明，否則看到的將是一個矩形方框在移動。然後在子層上載入一個顏色與父層背景顏色相同的mask濾鏡，並把子層拉大，使其能完全覆蓋父層的內容,這樣在瀏覽器中父層上的內容就只有圓形圖片那一部分能看見，這正是我們希望的效果。
　　4、當然要產生探照燈的效果，就要使那塊圓形區域動起來，這就要用Dreamweaver的時間線（Timeline)功能了。在DW3中先拖曳到子層，使其上的圖片剛好覆蓋父層內容的首部，按“Ctrl F9”，調出時間軸面板，把子層拖曳到時間軸面板上，把最後一格拖曳到100幀，再在第50幀插入一個關鍵幀，並把子層的圖片與父層內容的尾部重合，在時間軸面板上選取“Loop”（循環播放）和“Auto”（自動播放），一切OK。
　　一幅複雜的動畫完成，按F12看看，是不是有點酷？ ！