巧用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"左右,要根据实际情况多调试几次,以获得最佳效果。
《赛迪网》
与 或 标题 全文 关键字 以上全部
·国家级治脑病新药思维源 ·中藏药治疗脑病新突破 ·治类风湿,强直性脊柱炎 ·养肾·痛风·长寿 ·肝病泌尿脑萎缩新药介绍 ·强直性脊柱炎康复乐园 ·让中医辩证不孕不育 ·国医治股骨头坏死一绝 ·乙肝为何久治不愈? ·二千元垄断批发做老板 ·中医中药专治前列腺 ·治牛皮癣白癜风已成现实 ·专治痛风病的白衣天使 ·不孕不育的杏林奇葩 ·专卖店零售管理系统