作者：馮永曜
"wave"濾鏡，看它的名稱你可能就能想到其效果，正如你想的那樣，它的作用是把對象按照垂直的波形樣式扭曲，從而產生一種特殊的效果。它共有5個參數：
　　"add"：表示是否要把對象按照波形式樣扭曲，它只有兩個值，即"true"和"false",默認值是"true（非0）"，當然你也可以修改它的值為"false"（"0"）。
　　"freq"：是波紋的頻率，也就是指定在這個對象上面一共需要產生多少個完整的波紋。
　　"lightstrength"：參數可以對于波紋增強光影的效果。它的參數值范圍是從0到100的整數值。
　　"phase"：參數用來設置正弦波開始的偏移量。這個偏移量的通用值為0，但是你可以改變它。"phase"的值從0到100之間，這個數值代表開始時的偏移量取自波長的百分比值。 例如如果值為25那么正弦波就從90度的方向開始。
　　"strength"：表示波形的振幅大小，也可以簡單的理解為扭曲的程度。下面我們用"wave"濾鏡來做幾個特效：

1、波形文字
　　把"wave"濾鏡加載到文字上，就可得到波形文字的效果，請看：

　　圖1　文字上加載"wave"濾鏡效果

　　上面的效果還是很有意思的，不是嗎？制作起來卻非常簡單，具體步驟如下：
　　1）制作一個"wave"濾鏡，我們給它取名為"wave1"，制作完備，在源代碼的< head >與< /head >之間將有如下的代碼：
< style >
< --!
.wave1 { filter:wave (add=true, freq=6, lightstrength=10 , phase=0 ,strength=3) }
-- >
< /style >
　　2）插入一個表格，在表格中輸入文字，并設置好文字的字號和顏色。
　　3） 在< td >上加載"wave"濾鏡，這時你看到的這樣的一行代碼"< td class="wave1" >"，按F12就能看到效果了。
　　根據我的實踐，濾鏡加載到 < td >上效果比較好。另外要注意的是：在文字上使用"wave"濾鏡時，一般把"lightstrength"的值設置為"0"，否則文字的顏色將發生變化，影響效果；"strength" 的值在"5"左右，不然的話，文字就看不清楚了；文字的字號要稍大一些，不然的話效果不明顯。

2、彎曲的小花
　　把"wave"濾鏡加載到圖片上，將使圖片產生波形彎曲的效果，請看：
　 　
　　加載"wave"濾鏡后的效果

　　上面左邊一幅是原圖，中間一幅圖上加載了"wave"濾鏡，代碼是.wave1 { filter:wave(add=true, freq=6, lightstrength=0 , phase=0 ,strength=3) } ，右邊一幅圖也加載了濾鏡，但代碼是.wave2 { filter:wave(add=true, freq=6, lightstrength=30 , phase=0 ,strength=3) }，也就是把"lightstrength"設置為 "30"了，所以效果也就有了明顯的變化。由于可以把"wave"濾鏡直接加載到圖片上，所以制作起來更方便。具體制作步驟如下：
　　1）插入一張圖片。
　　2）用鼠標點一下圖片，再在快速啟動欄上點一下CSS圖標，在彈出的對話框中選擇"wave"濾鏡，就OK了，就這么簡單！
　　我在這里是用了一張有透明背景的gif圖片，若是用普通圖片也一樣，而且邊框還有波形陰影，請看下圖：


　　一般來講，"lightstrength"的值在"30"左右，要根據實際情況多調試幾次，以獲得最佳效果。

總結

以上是生活随笔為你收集整理的巧用CSS的Wave滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。