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

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

代码设置图片特效赏析  

2013-01-30 20:47:56|  分类: 图效代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自浪漫大少《常用图片特效代码》

 

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

图片特效 - 浪漫大少 - 浪漫大少的博客


代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: Alpha(opacity=100,FinishOpacity=0, style=2)" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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

图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ 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=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: flipv(color=#ffedff)" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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

图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: FlipH" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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

图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: gray(color=#ffedff)" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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

图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: xray(color=#ffedff)" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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

图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<IMG title=浪漫大少http://fcfswbk.blog.163.com/ style="FILTER: Invert" alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" width=图片宽度 border=0>


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


图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<DIV style="FILTER: Glow(color=#发光边颜色代码,strength=发光边宽度); WIDTH: 图片宽度px; HEIGHT: 图片高度px" align=center><BR><IMG title=浪漫大少http://fcfswbk.blog.163.com/ alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" border=0></DIV>

注释:

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


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


图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<DIV style="filter:Shadow(color=#投影边颜色代码,direction=投影角度);width:图片宽度;height:图片高度" align=center><BR><IMG title=浪漫大少http://fcfswbk.blog.163.com/ 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=浪漫大少http://fcfswbk.blog.163.com/ alt="图片特效 - 浪漫大少 - 浪漫大少的博客" src="图片地址" border=0></DIV>

注释:

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


特效12:显示模糊效果


图片特效 - 浪漫大少 - 浪漫大少的博客

代 码

<DIV style="filter:Blur(direction=155);width:438;height:260" align=center><BR><IMG title=浪漫大少http://fcfswbk.blog.163.com/ 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=浪漫大少http://fcfswbk.blog.163.com/ 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)

 

 

 

  评论这张
 
阅读(94)| 评论(4)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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