分享
 
 
 

CSS层叠样式表(滤镜篇)

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

使用css滤镜,我们可以用一张图片做出很多类似phtoshop滤镜的效果。

本篇的主要内容是:

Alpha滤镜

Blur滤镜

Chroma滤镜

Dropshadow滤镜

FlipH、FlipV滤镜

Glow滤镜

Gray滤镜

Invert滤镜

Light滤镜

Mask滤镜

Shawdow滤镜

Wave滤镜

X-ray滤镜

我们用一张图片做例子,学习各种滤镜特效。(btw:这是偶最近狂喜欢的多多宝宝,呵呵~~太可爱了太可爱了,怎么能那么可爱呢~~~)

咳咳,花痴发完了。。。进入正题吧——

Alpha滤镜

语法:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

参数和功能: 使对象产生透明度。

参数名称 功能 参数

Opacity 图片的不透明度 值从0-100,0为完全透明,100为完全不透明

FinishOpacity 设置渐变的透明效果时,用来指定结束时的透明度 值从0-100,0为完全透明,100为完全不透明

Style 指定渐变的显示形状 0:没有渐进;1:直线渐进;2:圆形渐进;3:矩形渐进

StartX 渐变透明效果开始的X坐标值

StartY 渐变透明效果开始的Y坐标值

FinishX 渐变透明效果结束的X坐标值

FinishY 渐变透明效果结束的Y坐标值

示范:

filter:alpha(opacity=80)}

仅仅改变了图片的透明度

alpha(opacity=0,finishopacity=100,style=1,

startx=0,starty=85,finishx=150,finishy=85)

有了一个直线的渐进效果

alpha(opacity=0,finishopacity=100,style=2,

startx=0,starty=85,finishx=150,finishy=85)

改变style=2,可以得到圆形的渐进效果 alpha(opacity=0,finishopacity=100,style=2,

startx=0,starty=85,finishx=150,finishy=85)

改变style=3,可以得到矩形的渐进效果

Blur滤镜

语法:Blur(Add=?, Direction=?, Strength=?)

参数和功能: 使对象产生模糊效果。

参数名称 功能 参数

Add 指定图片是否显示原来的模糊方向 0:不显示原对象;1:显示原对象

Direction 设置模糊的方向 0(上),45(右上),90(右),135(右下),180(下),225(左下),270(左),315(左上)

Strength 指定模糊图像模糊的半径大小 以pixels为单位,默认为5

示范:

blur(add=1,direction=90,strength=25)

blur(add=0,direction=90,strength=25)

Chroma滤镜

语法:Chroma(Color=?)

参数和功能: 某个颜色变透明。这个功能对图片的支持不是很好。

参数名称 功能 参数

color

把图片或文字中的某个颜色变为透明 RGB格式的颜色值

Dropshadow滤镜

语法:DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

参数和功能: 阴影效果。这个功能对图片的支持不是很好,普遍用于文字。

参数名称 功能 参数

Color 指定阴影的颜色 RGB格式的颜色值

OffX 指定阴影相对于对象在水平方向的偏移 整数。正数表示阴影在对象右方,负数表示在左方。

OffY 指定阴影相对于对象在水垂直方向的偏移 整数。正数表示阴影在对象上方,负数表示在下方。

Positive 指定阴影的透明度 0:透明,无阴影;非0:阴影的强度

示范:

文字效果

DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1) FlipH、FlipV滤镜

无任何参数。FlipH使对象产生水平翻转效果;FlipV使对象产生垂直翻转效果。

示范:

FlipH

FlipV

Glow滤镜

语法:Glow(Color=?, Strength=?)

参数和功能: 使对象的外轮廓产生一种光晕效果。一般用于文字效果。

参数名称 功能 参数

Color 指定光晕的颜色 RGB格式的颜色值

Strength 指定光晕的范围 设定值从1-255,数字越大光晕越强

示范: 文字效果

Glow(Color=ff0000, Strength=2)

Gray滤镜

无任何参数。使图片由彩色变为灰白色调。

示范:

Gray

Invert滤镜

无任何参数。使图片产生照片底片的效果。

示范:

Invert

Light滤镜语法:Light(?)

参数和功能:模拟光源的投射效果。 不过要通过调用方法来实现,这就需要用到javascript动态滤镜编程。在这里就不细说了。

方法 功能

AddAmbient 加入包围的光源

AddCone 加入锥形光源

Addpoint 加入点光源

Changcolor 改变光的颜色

Changstrength 改变光源的强度

Clear 清除所有的光源

MoveLight 移动光源

Mask滤镜

语法:Mask(Color=?)

参数和功能:在对象上建立一个覆盖于表面的膜。对图像的支持不好,普遍用于文字。

示范:

文字效果

Mask(Color=ff0000)

Shawdow滤镜

语法:Shadow(Color=?, Direction=?)

参数和功能:与dropshadow非常相似,也是一种阴影效果。dropshadow没有渐进感,shadow有渐进的阴影感。

参数名称 功能 参数

Color 指定阴影的颜色 RGB格式的颜色值

Direction 指定阴影的方向 0:垂直向上;每45度为一个单位

示范:

文字效果

Shadow(Color=000000, Direction=0)

Wave滤镜

语法:Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

参数和功能:使对象在垂直方向上产生波浪的变形效果。

参数名称 功能 参数

Add 表示是否显示原对象 0:不显示;1:显示

Freq 设置波动的数量 自然数

LightStrength 设置波浪效果的光照强度 0-100,1为最弱,100为最强

Phase 波浪的起始相位 0-100

Strength 设置波浪摇摆的幅度 自然数

示范:

wave(add=true,freq=3,lightstrength=100,phase=45,strength=5)

X-ray滤镜

无任何参数。使图片只显示其轮廓。

Xray

以上我们学习了css的静态滤镜。除了这些之外,css还包含两种动态滤镜,BlendTrans混合转换滤镜和Revealtrans显示转换滤镜。这两类滤镜不能单独在htnl中调用,必须要结合在scripts程序中,由spripts程序对其进行控制。所以要使用动态滤镜,必须要会spripts编程。不过,我们可以在网上找到很多现成的javascripts来使用,在这里就不多说了。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有