转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
巧用CSS的Wave滤镜         ★★★★

巧用CSS的Wave滤镜

作者:闵涛 文章来源:闵涛的学习笔记 点击数:686 更新时间:2009/4/23 13:47:25

  "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滤镜(9)Wave属性
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台