巧用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"滤镜加载到文字上，就可得到波形文字的效果，请看：

　　图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滤镜相关推荐

巧用CSS的Glow滤镜
作者:冯永曜对一个对象使用"glow"滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的"glow&qu ...
css中用wave滤镜,CSS滤镜
本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 滤镜主要是用来实现图像的各种特殊效果.它在Photoshop中具有非常神奇的作用.所以有的Photoshop都按分类放置在菜单 ...
巧用CSS的 Mask 滤镜
作者:冯永曜在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多.其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来 ...
巧用CSS的BlendTrans滤镜
作者:冯永曜 BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效 ...
巧用CSS的RevealTrans滤镜
作者: 冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种.用它来进行网页之间的动态切换,简直 ...
html探照灯效果,巧用CSS的MASK滤镜
Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了.实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来 ...
巧用CSS的Light滤镜
作者: 冯永曜 Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的"方法(Method)"来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是 ...
巧用CSS的alpha滤镜
作者:冯永曜 "Alpha"滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过.一点不错,它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数 ...
巧用css的滤镜filter属性处理图片，高斯模糊，HTML页面黑白滤镜等
效果如下:使用css的filter滤镜属性.可以巧妙的设置图片高斯模糊和特效.包括灰色纪念清明节等悼念烈士英雄灰白效果. <img class='testimg' src="./img ...

巧用CSS的Wave滤镜

巧用CSS的Wave滤镜相关推荐

最新文章

热门文章