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

秋雨的博客

祝我的朋友们身体健康

 
 
 

日志

 
 

图片代码处理特效  

2013-12-12 13:20:25|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 
图片代码处理特效
 


 

 
缘分的天空有你有我有他
真诚的祝福朋友
快乐无边!
欢迎您 光临
海洋之魂音画空间
编辑/制作:海洋之魂
 
【海洋之魂音画】——博客素材·图片代码处理特效 - 海洋之魂 - 海洋之魂音画空间
 

 
(一)图片滤镜效果:
(1)平板效果 

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

(2)线性效果 

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

(3)圆形效果

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

(4)方形效果

 

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

 

 

(二)图片翻转效果:

(1)左右翻转:

 



【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

 

 

(2)上下翻转:

 



【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间

 

 

(二)图片变调效果:

(1)灰调效果:


【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
(2)X光效果



【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
(3)色彩对调效果
 
【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
(三)图片边框效果:
(1)发光边框
代码:

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

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

说明:(color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2,

滤镜高=图高+发光强度x2+10)

效果:


 
【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
2)投影边框
代码:

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

效果:


 
【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
(3)阴影边框:
代码:

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

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


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

效果:


【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
(4)模糊:
代码:

<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)
  效果:


【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
(5)波形:
代码:

<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),滤镜宽=图宽+振幅强度x2,滤镜高=图高+振幅强度x2+10)


【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
四、CSS滤镜实现图片特效(模糊倒影+雾化+多层FLASH特效)

1、图片静态倒影:

代码:

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

<IMG style="FILTER: wave
(strength=3, freq=3, phase=0, lightstrength=30)  blur() flipv()" 

height=高度 src="图片地址" width=宽度></DIV>


说明:修改其中的图片地址和高度宽度即可。 


效果:
 
【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
【图片滤镜效果】 - 海洋之魂 - 海洋之魂音画空间
 
2、给图片加多层FLASH特效代码
 代码:
<DIV align=center>
<TABLE height=表格高度 cellSpacing=0 cellPadding=0 width=宽度
background=图片地址 border=0>
<TBODY>
<TR>
<TD><EMBED align=right src=第一个FLASH地址 width=宽 height=高
type=application/octet-stream wmode="transparent"quality="high" ;;>
<EMBED align=right src=第二个地址 width=400 height=300
type=application/octet-stream wmode="transparent"quality="high";;>.
......以此类推</EMBED>
</TD></TR></TBODY></TABLE></DIV>
说明:修改代码中的汉字为自己想要的。
 
效果:

 






 
  评论这张
 
阅读(76)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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