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

汉卿博客

音画乐园

 
 
 

日志

 
 
关于我

总结经验 再创辉煌 音画乐园--展现一切美好的人和事、并通过特技发挥到极致!

网易考拉推荐

製作多種效果圖  

2009-05-12 02:20:18|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

製作多種效果圖 2009-05-04 18:18

一.基础代码

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<IMG src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350>

二.淡化边缘

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<IMG style="FILTER: Alpha(opacity=100,style=1)" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子 

代码如下 :<IMG style="FILTER: Alpha(opacity=100,style=2)" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<IMG style="FILTER: Alpha(opacity=100,style=3)" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350>

三.加框效果

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:1.<img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350 style="border:8px #ff0000 dotted">

2.<IMG style="BORDER-RIGHT: #ff0000 8px dotted; BORDER-TOP: #ff0000  8px dotted; BORDER-LEFT: #ff0000  8px dotted; BORDER-BOTTOM: #ff0000  8px dotted" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif">

 

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350 style="border:12px #ff0000 double">

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<P align=center><img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350 style="border:5px #ff0000 dashed">

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350 style="border:12px #ff0000 groove">

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子代码如下:<table style="border:3 dashed #ff0000" cellspacing="5" cellpadding="0" bgcolor="#ff0000"><tr><td bgcolor="#ccff33" width=350  align=center ><img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif"> 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下: <img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ccff33,strength=10)">

四.图片上下左右几种方向移动的效果

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<MARQUEE direction=right  scrollamount=10><IMG src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif"></MARQUEE>

说明:direction=right是表示图片自左向右移动,direction=left表示自右向左移动,也可省略.direction=up是表示图片由下而上移动,direction=down是表示由上往下移动.

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<marquee width=100% behavior=alternate scrollamount=10><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif width=350 ></marquee>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<marquee width=100% behavior=slide scrollamount=10><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif width=350 ></marquee>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下::<marquee direction=left><marquee behavior=alternate direction=up height=500><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif> </marquee>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<marquee width=350 ><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif width=350>  </marquee><marquee direction=right width=350 ><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif width=350>  </marquee>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<marquee direction=up  scrollamount=3><center><img src=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif width=350></marquee><marquee direction=down scrollamount=3> <center> <div style="width:350;filter:flipv;"><img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=350></div></center></marquee>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:

<MARQUEE scrollAmount=3 direction=right behavior=alternate>

<MARQUEE direction=up behavior=alternate width=100 height=500>

<P align=center><IMG src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif"></MARQUEE>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<TABLE cellSpacing=0 cellPadding=0 width="50%" align=center border=0>

<TBODY>

<TR>

<TD align=middle>

<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=175></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=175></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=175></MARQUEE></TD>

<TD align=middle>

<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=175></MARQUEE></TD></TR></TBODY></TABLE>

五.图片的一些效果的组合

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:1.<MARQUEE direction=right  scrollamount=10><IMG style="FILTER: Alpha(opacity=100,style=2)" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif"> </MARQUEE>

  2.<MARQUEE direction=right  scrollamount=10 >

<TABLE style="FILTER: Alpha(opacity=100,style=2)"  width=350 height=263 background=http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif > </MARQUEE>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下: <MARQUEE style="WIDTH: 700px " scrollAmount=3 direction=right>

 <img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif"  width=450  style="border:8px #ff0000 dotted"></MARQUEE>

六.图片的另外一些滤镜效果

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下: <IMG height=232 src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=310><BR><IMG style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" height=232 src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" width=310>

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下: <IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif">

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下: <IMG style="FILTER: gray" src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif">  製作多種效果圖 - ★~P:梅子 - ★~P:梅子

代码如下:<img src="http://dl3.glitter-graphics.net/pub/384/384783f9zzfy177s.gif" style="filter:invert">

七.使用JavaScript实现的其它图片效果

 製作多種效果圖 - ★~P:梅子 - ★~P:梅子

  评论这张
 
阅读(89)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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