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

笑看天下诸侯戏 独卧仙居逍遥乐

 
 
 

日志

 
 

【代码应用】十三种图片特效  

2010-09-18 13:23:46|  分类: 代码应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
   素材:取之网络
十三种图片特效
  编辑:静中有动

 

特效1:显示椭圆透明效果

图片特效 - 静中有动 - 静中有动的休闲屋


代    码

<IMG title="静中有动的涂鸦" style="FILTER: Alpha(opacity=100,FinishOpacity=0, style=2)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效2:显示矩形透明效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: Alpha(opacity=100,FinishOpacity=0, style=3)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效3:显示线状透明效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: Alpha(opacity=100,finishOpacity=0,style=1)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效4:显示垂直反相效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: flipv(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效5:显示水平反相效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: FlipH" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效6:显示黑白图片效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: gray(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效7:显示X光负片效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: xray(color=#ffedff)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效8:显示色彩对换效果

图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<IMG title="静中有动的涂鸦" style="FILTER: Invert" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>


 

特效9:显示发光彩边效果


插入特效图片代码 - 静中有动 - 静中有动

代    码

<DIV style="FILTER: Glow(color=#发光边颜色代码,strength=发光边宽度); WIDTH: 图片宽度px; HEIGHT: 图片高度px" align=center><BR><IMG title="静中有动的涂鸦" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" border=0></DIV>

 注释:

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


 

特效10:显示边框投影效果


图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<DIV style="filter:Shadow(color=#投影边颜色代码,direction=投影角度);width:图片宽度;height:图片高度" align=center><BR><IMG title="静中有动的涂鸦" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" border=0></DIV>

 注释:

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


 

特效11:显示边框倒影效果


【代码应用】十四种图片特效 - 金睛 - 静中有动的习作屋

代    码

<DIV style="filter:Dropshadow(color=#倒影颜色代码,offX=横影宽度,offY=竖影宽度);width:图片宽度;height:图片高度" align=center><BR><IMG title="静中有动的涂鸦" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" border=0></DIV>

注释:

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


 

特效12:显示模糊效果


图片特效 - 静中有动 - 静中有动的休闲屋

代    码

<DIV style="filter:Blur(direction=155);width:430;height:230" align=center><BR><IMG title="静中有动的涂鸦" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0>

注释:

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


 

特效13:显示扭曲效果


图片特效 - 静中有动 - 静中有动的休闲屋
代    码

<DIV style="filter:Wave(freq=7,strength=9,lightstrength=5,phase=5);width:460;height:350" align=center><BR><IMG title="静中有动的涂鸦" style="FILTER: Alpha(opacity=100,FinishOpacity=0, style=2)" alt="图片特效 - 静中有动 - 静中有动的休闲屋" src="图片地址" width=图片宽度 border=0></DIV>

注释:

(freq频率(>0)strength振幅强度(>0)lightstrength波峰强度(0~100愈高越黑)phase起始相位(0~100),滤镜宽=图宽+振幅强度x2,滤镜高=图高+振幅强度x2+10)

 

 

 

彩色渐变字教程 - 静中有动 - 静中有动的休闲屋

 

请保持本博的个性风格,朋友如需要此内容而不想显现来源的,请复制上面的内容自主处理
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
  评论这张
 
阅读(859)| 评论(32)
推荐 转载

历史上的今天

评论

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

页脚

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