注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

xianger

 
 
 

日志

 
 

图片各种滤镜特效代码*  

2010-12-15 19:52:42|  分类: 【动态素材】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

图片各种滤镜特效代码
百万书库 - 香儿 - xianger


透明

透明效果(一)


图片滤镜特效代码 - 香儿 - xianger


透明代码(一)

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

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

opacity:开始处的透明度

finishOpacity:结束处的透明度

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

透明效果(二)


图片滤镜特效代码 - 香儿 - xianger


透明代码(二)

<div style="filter:Alpha(opacity=100,finishOpacity=0,style=0) ;width:宽;height:高"><img src="图片地址"></div>

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

opacity:开始处的透明度

finishOpacity:结束处的透明度

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


模糊效果


图片滤镜特效代码 - 香儿 - xianger

模糊代码


<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)


波形效果



图片滤镜特效代码 - 香儿 - xianger

波形效果代码


<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)" cellSpacing=5 cellPadding=0><TBODY><TR><TD width=图片宽度 background=图片地址  height=图片高度></TD></TR></TBODY></TABLE></CENTER>


图片静态倒影效果

图片滤镜特效代码 - 香儿 - xianger
图片滤镜特效代码 - 香儿 - xianger



图片静态倒影代码

<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>


翻转

左右翻转效果



图片滤镜特效代码 - 香儿 - xianger


左右翻转代码

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

或者

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

上下翻转效果



图片滤镜特效代码 - 香儿 - xianger


上下翻转代码

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

或者

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


变调效果

灰调格式效果


图片滤镜特效代码 - 香儿 - xianger

灰调格式代码


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

或者

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

X光效果


图片滤镜特效代码 - 香儿 - xianger

X光效果代码


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

或者

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

色彩对换效果


图片滤镜特效代码 - 香儿 - xianger

色彩对换代码


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


或者

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

浮雕效果

浮雕效果代码

<CENTER><TABLE style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" cellSpacing=5 cellPadding=0><TBODY><TR><TD width=图片宽度 background=图片地址 height=图片高度></TD></TR></TBODY></TABLE></CENTER>


添加边框效果


发光边框效果


图片滤镜特效代码 - 香儿 - xianger


发光边框代码

<div style="filter:Glow(color=#4A7AC9,strength=15);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

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


投影边框效果




图片滤镜特效代码 - 香儿 - xianger


投影边框代码

<div style="filter:Shadow(color=#4A7AC9,direction=135);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

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

滤镜高=图高+40)


阴影边框效果




图片滤镜特效代码 - 香儿 - xianger


阴影边框代码

<div style="filter:Dropshadow(color=#333333,offX=5,offY=5);width:滤镜宽;height:滤镜高" align=center><br><img src="图片地址"></div>

 【代码说明】(color为发光颜色代码,offX水平位移offY垂直位移(可正可负),滤镜宽=图宽 +水平位移绝对值+ 10,滤镜高=图高 +垂直位移绝对值 +20)

  评论这张
 
阅读(14161)| 评论(30)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017