当前位置: 代码网 > it编程>网页制作>Css > css滤镜属性语法介绍

css滤镜属性语法介绍

2024年05月18日 Css 我要评论
css滤镜 style属性:   可以应用在标签中,更可用广泛应用在<table><tr><td><body> <center><im
css滤镜 
style属性:
  可以应用在标签中,更可用广泛应用在<table><tr><td><body>
<center><img><input><font><form><frame><label><map>等等标签中,
更重要的是,它可用在标签中。
页面切换效果:
在页面前部与之间加入""
说明:duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输
入3便可;transition为切换效果,从1-23共22种不同的切换效果,其中23
为随机效果。
滤镜效果:
photoshop的滤镜用的多了吧,在页面中也用滤镜搞搞新意思吧!
语法:style="filter:filtername(fparameter1,fparameter2...)}
(filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
alpha:设置透明层次.
blur:创建高速度移动效果,即模糊效果.
chroma:制作专用颜色透明.
dropshadow:创建对象的固定影子.
fliph:创建水平镜像图片.
flipv:创建垂直镜像图片.
glow:加光辉在附近对象的边外.
gray:把图片灰度化.
invert:反色.
light:创建光源在对象上.
mask:创建透明掩膜在对象上.
shadow:创建偏移固定影子.
wave:波纹效果.
xray:使对象变的像被x光照射一样.
1.滤镜:alpha
语法:
style="filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)"
说明:
opacity:起始值,取值为0-100,0为透明,100为原图.
finishopacity:目标值.
style:1或2或3
startx:任意值
starty:任意值
例子:filter:alpha(opacity="0",finishopacity="40",style="2")
2.滤镜:blur
语法:
style="filter:blur(add=add,direction=direction,
strength=strength)"
说明:
add:一般为1,或0.
direction:角度,0-315度,步长为45度.
strength:效果增长的数值,一般5即可.
例子:filter:blur(add="1",direction="45",strength="5")
3.滤镜:chroma
语法:
style="filter:chroma(color=color)"
说明:
color:#rrggbb格式,任意.
例子:filter:chroma(color="#ffffff")
4.滤镜:dropshadow
语法:
style="filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)"
说明:
color:#rrggbb格式,任意.
offx:x轴偏离值.
offy:y轴偏离值.
positive:1或0.
例子:filter:dropshadow(color="#6699cc",offx="5",offy="5",
positive="1")
5.滤镜:fliph
语法:
style="filter:fliph"
例子:filter:fliph
6.滤镜:flipv
语法:
style="filter:flipv"
例子:filter:flipv
7.滤镜:glow
语法:
style="filter:glow(color=color,strength=strength)"
说明:
color:发光颜色.
strength:强度(0-100)
例子:filter:glow(color="#6699cc",strength="5")
8滤镜:gray
语法:
style="filter:gray"
例子:filter:gray
9.滤镜:invert
语法:
style="filter:invert"
例子:filter:invert
10.滤镜:mask
语法:
style="filter:mask(color=color)"
例子:filter:mask(color="#ffffe0")
11.滤镜:shadow
语法:
filter:shadow(color=color,direction=direction)
说明:
color:#rrggbb格式.
direction:角度,0-315度,步长为45度.
例子:filter:shadow(color="#6699cc",direction="135")
12.滤镜:wave
语法:
filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,
strength=strength)
说明:
add:一般为1,或0.
freq:变形值.
lightstrength:变形百分比.
phase:角度变形百分比.
strength:变形强度.
例子:filter:wave(add="0",phase="4",freq="5",lightstrength="5",strength="2")
13.滤镜:xray
语法:
style="filter:xray"
例子:filter:xray 
(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com