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

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

  圖1 mask濾鏡效果1

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

  圖2 mask濾鏡效果2

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

  圖3 探照燈動畫效果1

  圖4 探照燈動畫效果2

  下面介紹製作方法:
  這種效果比起上面的例子來要複雜一點,但也就是多點幾次滑鼠而已。
  1、插入一個圖層,我稱其為“父層”,該層用來放要顯示的內容(文字或圖片)。再在該層上插入一個層,我稱其為子層,它主要用來產生遮罩效果。
  2、在父層的屬性面板上設定顯示視窗,也就是設定圖層的“Clip”屬性,在該屬性中用的是相對座標,其中:L、T是左上方座標;R、B 是右下角座標。以後的子層將只有在你設定的視窗中才顯示。設定好的層屬性參數面板如所示:

  圖5 層屬性面板

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

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.