巧用CSS的Wave滤镜
作者:冯永曜
"wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果。它共有5个参数:
"add":表示是否要把对象按照波形式样扭曲,它只有两个值,即"true"和"false",默认值是"true(非0)",当然你也可以修改它的值为"false"("0")。
"freq":是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的波纹。
"lightstrength":参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。
"phase":参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0,但是你可以改变它。"phase"的值从0到100之间,这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。
"strength":表示波形的振幅大小,也可以简单的理解为扭曲的程度。下面我们用"wave"滤镜来做几个特效:
1、波形文字
把"wave"滤镜加载到文字上,就可得到波形文字的效果,请看:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-1.gif)
图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"滤镜加载到图片上,将使图片产生波形弯曲的效果,请看:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-2.jpg)
加载"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图片,若是用普通图片也一样,而且边框还有波形阴影,请看下图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-5.jpg)
一般来讲,"lightstrength"的值在"30"左右,要根据实际情况多调试几次,以获得最佳效果。
"wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果。它共有5个参数:
"add":表示是否要把对象按照波形式样扭曲,它只有两个值,即"true"和"false",默认值是"true(非0)",当然你也可以修改它的值为"false"("0")。
"freq":是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的波纹。
"lightstrength":参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。
"phase":参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0,但是你可以改变它。"phase"的值从0到100之间,这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。
"strength":表示波形的振幅大小,也可以简单的理解为扭曲的程度。下面我们用"wave"滤镜来做几个特效:
1、波形文字
把"wave"滤镜加载到文字上,就可得到波形文字的效果,请看:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-1.gif)
图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"滤镜加载到图片上,将使图片产生波形弯曲的效果,请看:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-4.jpg)
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-3.jpg)
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-2.jpg)
加载"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图片,若是用普通图片也一样,而且边框还有波形阴影,请看下图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/03-5.jpg)
一般来讲,"lightstrength"的值在"30"左右,要根据实际情况多调试几次,以获得最佳效果。