首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
上海网站建设
网站建设
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg
ACG玩家
品牌设计
当前位置:
网络学院首页
>>
设计教程
>>
web标准
>> CSS:Wave滤镜
CSS:Wave滤镜 (1)
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源:
中国设计秀
作者:
点击:
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图片,若是用普通图片也一样,而且边框还有波形阴影,请看下图:
0
顶一下
[1]
[
2
]
2007-10-22 12:36:00 出处:
输入您的搜索字词
提交搜索表单
本文引用地址:
http://www.cnwebshow.com/edu/html/article_1426.html
热点文章/相关文章
素材下载
矢量
潮流素材
背景素材
模板
最新文章
·
css代码:网页圆角的做法
·
@import在IE下的闪烁BUG
·
用符合标准的html代码编写专题...
·
工作中常用的高效的CSS代码
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
WEB标准中如何优化你的CSS代码?
·
CSS样式表文件的优化及其技巧
·
网页设计中CSS加载方式对页面优...
艺术设计秀最新图片
国外优秀图形插画...
Valding Deborah包...
Children's Aid S...
国外Joseph Willi...
日本著名插画设计...
Kedar Chavan平面...
推荐文章
·
css代码:网页圆角的做法
·
用符合标准的html代码编写专题...
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
!important在ie7.0的hack方法
·
web标准:CSS clear的属性及使...
·
CSS三栏布局中最先显示中栏的方法
音乐
嫁衣
画心
放生
天亮了
牡丹江
那滋味
擦肩而过
怀念过去
北京欢迎你
突然好想你
吻的太逼真
说好的幸福呢
坐上火车去拉萨
没有人比我更爱你
愚爱
心碎
稻香
带我走
醉赤壁
魔杰座
我还想她
明天过后
一定要爱你
等爱的玫瑰
原谅我一次
越单纯越幸福
最后一次的温柔
给我一首歌的时间
白狐
光荣
降临
下雨天
小酒窝
樱花草
恋爱新手
说唱脸谱
红色高跟鞋
寂寞才说爱
深深爱过你
爱上你是个错
即使知道要见面
不是因为寂寞才想你
城府
假如
花海
兰亭序
棉花糖
舍不得
最后一次
女人如烟
外滩十八号
我们的纪念
我们的无奈
心在跳情在烧
爱上你是我的错
爱情里没有谁对谁错
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!
中国设计秀,秀---无处不在!!
交流群:9107036 3848215 8850631
粤ICP备05067046号