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

小乐作品--细品人生

品味生活-品味茶香-品味青春-品味我们的年代

 
 
 

日志

 
 
关于我

Hello,大家好,个性名:唐少,英文名:harry Tang《哈里.唐》,别名叫:happy king,网络达人名:唐家OPPA。我是一个活泼开朗且又风趣的大男生,超赞的个性一族哦~!最骄傲的就是自己长了一张人见人爱,佛见佛跪拜的娃娃脸,我来至于周恩来的故乡--淮安。本人博友已到上限,你们加我为好友吧!

网易考拉推荐

【转载】【代码应用】一组漂亮的遮罩效果图(附遮罩素材)  

2012-07-22 10:57:39|  分类: 【博客专辑】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 
2011年08月02日 - 夕阳无限美 - 夕阳无限美de博客  

 

一组漂亮的遮罩效果图 
金色分隔线 - 香儿







代码提供/理睬老师        学习制作/夕阳无限美     

代 码 如 下:

 代码:

  你用这组代码时,只需要换上你的图片(里面有两个图片地址),再调整一下高宽比例,使三张图片一般大小即可。第三个图片地址是遮罩动画,可以替换,你也可以自己做。

<DIV align=center>
<TABLE cellSpacing=0 width=680 background=http://img3.bimg.126.net/photo/ePGE8047XU6VI1RKEGcyhQ==/4547791198715388863.jpg height=1020>
<TBODY>
<TR>
<TD  style="FILTER: chroma(color=#000000)" background=http://img7.bimg.126.net/photo/evryeonDUBQ8oIuosWd_8g==/4547791198715388857.jpg>
<TABLE border=0 width=680 height=1020>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)"> 
<TABLE border=0 width=680 background=http://img8.ph.126.net/YvfEoB6kbJ-pQai8WEFzyQ==/190558559250820628.gif height=1020>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR>



金色分隔线 - 香儿

 

 美好的回忆从这里开始 




全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



全屏



用代码做flash遮罩动画
用代码做flash遮罩动画 - 和尚 - 和尚博客

用代码做flash遮罩动画 - 和尚 - 和尚博客

用代码做flash遮罩动画 - 和尚 - 和尚博客

用代码做flash遮罩动画 - 和尚 - 和尚博客

用代码做flash遮罩动画 - 和尚 - 和尚博客

  自从朋友家看到这组代码后,我重新设计了动画方案。原先的是利用移动代码来实现动态遮罩,我改变成用动画图片来变换动态效果,比移动代码来的更耀眼夺目,朋友只要好好设计动画图片,就能改变动态效果。另外请注意:你的动画图片一定要做成单色(最好用白色),要与你的遮罩颜色保持一致(白色用FFFFFF代码)否则将不能被遮罩。

代码如下:

<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img7.ph.126.net/di18rJ-WPm6OrVCyJfQ4Rw==/1322650915580964217.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img8.ph.126.net/V7VmFGepdyuRjcNiy8rx8Q==/2540311664831265208.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG src="http://img2.ph.126.net/SeXUf30yA69NPuSkuJ7tUw==/1090715534771198942.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR>

其中红色代码是人物图片(底图);蓝色代码是花草图片(面图);黄色代码是遮罩图片(动画)。



用代码做flash遮罩动画 - 梦醒时分-梦醒时分的博客

代 码 复 制 如 下
 
 
<DIV align=center><TABLE cellSpacing=0 width=850
background=http://img7.ph.126.net/MPeY-qH7rGBnUUKRL0BoQw==/674414044216325327.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img767.ph.126.net/GMWb4LUat5VSBGLjw9bhkw==/4915678993275142770.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG src="http://img2.ph.126.net/s3-k9NwntTmw4EJd6egPDQ==/3036833523748473742.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<DIV></DIV><BR>

 

 


效果图一

用代码做flash遮罩动画 - 梦醒时分-梦醒时分的博客

代 码 复 制 如 下
 
 
<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img852.ph.126.net/geVQ9vIhq_I2nVerTA5Faw==/605452674906062401.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img852.ph.126.net/Na_8V2ZuQmUq-37UWXg_nA==/605452674906062353.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG  src="http://img9.ph.126.net/rmaf-1laj8BSsZS5Nyx5Dw==/1586111493782138909.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR>

 


效果图二


一生一世只爱你(代码做flash遮罩动画) - 梦醒时分 - 梦醒时分的博客

代 码 复 制 如 下
 
 
<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img852.ph.126.net/1bXtTmJ6GDcmI_2d4BydIg==/605452674906062445.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img767.ph.126.net/wmHbsyZurocSXzkifNdbuA==/4915678993275142678.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG src="http://img0.ph.126.net/nPAkfNxH5Mjx6gE9ipAAbw==/2518919566601259250.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR><BR>

 

效果图三


一生一世只爱你(代码做flash遮罩动画) - 梦醒时分 - 梦醒时分的博客


代 码 复 制 如 下
 
 
<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img7.ph.126.net/di18rJ-WPm6OrVCyJfQ4Rw==/1322650915580964217.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img39.ph.126.net/cwJaocrVgWSU9ho-UcDrnQ==/3149423514417847333.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG  src="http://img2.ph.126.net/SeXUf30yA69NPuSkuJ7tUw==/1090715534771198942.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV>

效果图四


一生一世只爱你(代码做flash遮罩动画) - 梦醒时分 - 梦醒时分的博客
代 码 复 制 如 下
 
 
<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img.ph.126.net/3MI3kfcG50thL_GcSmkXbA==/3051751697497560218.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img700.ph.126.net/FX_gR1MBjUKIGNMBYWTAZA==/1180224577348988531.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG  src="http://img9.ph.126.net/rmaf-1laj8BSsZS5Nyx5Dw==/1586111493782138909.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR>

效果图五


一生一世只爱你(代码做flash遮罩动画) - 梦醒时分 - 梦醒时分的博客

尊重声明:以上各组代码是根据和尚老师提供的。在此梦醒时分感谢老师给大家带来无限精彩,同时与大家一起共分享!

点击进入老师博客原地址:http://shilai199.blog.163.com/blog/static/3292756520125393750621/

   自从老师从朋友家看到这组代码后,就重新设计了动画方案。原先的是利用移动代码来实现动态遮罩,改变成用动画图片来变换动态效果,比移动代码来的更耀眼夺目,朋友只要好好设计动画图片,就能改变动态效果。另外请注意:你的动画图片一定要做成单色(最好用白色),要与你的遮罩颜色保持一致(白色用FFFFFF代码)否则将不能被遮罩。

代码如下:

<DIV align=center>
<TABLE cellSpacing=0 width=850 background=http://img7.ph.126.net/di18rJ-WPm6OrVCyJfQ4Rw==/1322650915580964217.jpg height=560>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff)" background=http://img8.ph.126.net/V7VmFGepdyuRjcNiy8rx8Q==/2540311664831265208.jpg>
<DIV style="MARGIN: -3px 0px -5px">
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD>
<TABLE border=0 width=850 height=560>
<TBODY>
<TR>
<TD><IMG src="http://img2.ph.126.net/SeXUf30yA69NPuSkuJ7tUw==/1090715534771198942.gif" width=850> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><BR>

其中红色代码是人物图片(底图);蓝色代码是花草图片(面图);黄色代码是遮罩图片(动画)。

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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