码迷,mamicode.com
首页 > Web开发 > 详细

网页图片各种滤镜特效代码

时间:2015-05-10 15:29:39      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

透明代码(一)  

<img  src="图片地址"  style="filter:Alpha(opacity=100,finishOpacity=0,style=0)"> 

【代码说明】涉及到的属性:修改数值对应即可 

opacity:开始处的透明度 

finishOpacity:结束处的透明度 

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明  

 

透明代码(二)  

<div  style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;width:宽;height:高">

<img src="图片地址">

</div>  

【代码说明】涉及到的属性:修改数值对应即可 

opacity:开始处的透明度 

finishOpacity:结束处的透明度 

style:0,平均透明 1,线状透明 2,圆形透明 3,菱形透明

 

模糊代码 

<div  style="filter:Blur(direction=135);width:滤镜宽;height:滤镜高" align=center> <br>

<img src="图片地址">

</div>  

【代码说明】

(direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,滤镜高=图高+30) 

 

波形效果代码  

<div  style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:滤镜宽;height:滤镜高" align=center> <br>

<img src="图片地址">

</div>   

【代码说明】  

(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100

愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度×2,滤镜高=图高+振幅强度×2+10) 

风吹效果代码  

<CENTER>

<TABLE  style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY<CENTER>

<TABLE  style="FILTER: wave(freq=11, strength=4, phase=6, lightstrength=10)"

 

图片静态倒影代码  

 <p align=center><img height=高度 src="图片地址" width=宽度><BR>

<img style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度  src="图片地址" width=宽度>

 </p> 

 

圆形渐变透明(虚光)代码   

<CENTER>

<TABLE  style="FILTER: alpha(opacity=100,style=2,finishopacity=0)" cellSpacing=5 cellPadding=0><TBODY>

<TR><TD width=图片宽度 background=图片地址height=图片高度></TD></TR>

</TBODY>

</TABLE>

</CENTER>

 

左右翻转代码 

 <img src="图片地址" style="filter:FlipH">  

或者 

 <div style="filter:FlipH ;width:宽;height:高"><img src="图片地址"></div>

 

上下翻转代码 

<img src="图片地址" style="filter:FlipV">  

或者  

<div style="filter:FlipV ;width:宽;height:高"><img src="图片地址"></div>

 

灰调格式代码 

 <img src="图片地址" style="filter:Gray">  

或者  

<div style="filter:Gray ;width:宽;height:高"><img src="图片地址"></div>

 

X光效果代码 

<img src="图片地址" style="filter:Xray">  

或者  

<div style="filter:Xray ;width:宽;height:高"><img src="图片地址"></div> 

 

色彩对换代码  

<img src="图片地址" style="filter:Invert"> 

 

浮雕效果代码  

<CENTER>

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" cellSpacing=5 

cellPadding=0>

<TBODY><TR><TD width=图片宽度 background=图片地址 height=图片高度></TD></TR>

</TBODY>

</TABLE>

</CENTER>

 

发光边框代码  

 <div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center>

<br>

<img src="图片地址"></div>  

【代码说明】

(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度×2,滤镜高=图高+发光强度×2 +10)

 

投影边框代码 

<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" ><br>

<img src="图片地址"></div>   

【代码说明】

(color为发光颜色代码,direction方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25)

 

阴影边框代码 

<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" ><br>

<img src="图片地址"></div>   

【代码说明】

(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽 +水平位移绝对值+ 10,滤镜高=图高 +垂直位移绝对值 +20)  图片各种滤镜特效代码 

网页图片各种滤镜特效代码

标签:

原文地址:http://www.cnblogs.com/bossren/p/4492250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!