当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS:Wave滤镜

CSS:Wave滤镜 (1)

来源：中国设计秀作者：点击：306 加入收藏

　"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图片，若是用普通图片也一样，而且边框还有波形阴影，请看下图：

顶一下

[1] [2]

2007-10-22 12:36:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1426.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板