雨后惊鸿网易博客

素材网站

日志

关于我

雨后惊鸿

越是成熟的稻穗,就越懂得弯腰。

文章分类

怎样为背景透明的动画或文字特效添加一幅背景图

2008-08-18 11:19:36| 分类：【博客技巧】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

引用

海珠儿的怎样为背景透明的动画或文字特效添加一幅背景图

            一、将下面的代码复制粘贴在自定义模块中:

    怎样粘贴请参看：所有代码的粘贴法（献给初学者）

    1、代码：

           <DIV></DIV>
           <TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
           <TBODY>
           <TR>
           <TD background=图片地址>生成的动画代码或文字特效代码</TD></TR></TBODY></TABLE>

      2、说明：

       A、红颜色部分是背景图片代码。如果你只需导入一个静止的背景图，你就只取红颜色部分的代码就行了；

       B、中间的是动画代码，这样的颜色标识，已经告诉我们就是把动画代码放在红颜色的代码中间就是了。

      C、问题的关键就是要得到图片地址和生成的动画代码。得到后，一替换就ok了。

二、找准图片地址的方法：

          1、最简单的方法：点开放大网上相册中的图片，右键单击图片，在弹出的菜单中选择“属性”，再在弹出的框中就有图片的地址、宽度和高度；

         2、另一种方法是另外打开一个页面窗口操作

        A、日志编辑状态--添加图片--选择相册--选择相片--点添加图片--点击全部功能--点击按钮<>--代码生成;

       B、找准图片地址：

       例如，下面是一段生成的图片代码，哪是准确的图片地址？红色处才是。

       <A href="http://blog.163.com/gsd_432427/album/prevPhoto.do?photoId=_fks_XHKODqk2spuEssuhC6CZ785Eh17vBuZ-" target=_blank><IMG src="http://img.blog.163.com/photo/tmBbdpB4cyC7Ez

j6x6iAtg==/637822297226408340.jpg"></A>

  注意：这个地址必须是以http://img开头，以jpg或gif结尾的才行

        3、将生成的图片地址复制粘贴在“图片地址”处，替换这4个字。

三、贴入动画代码：

    1、又另外打开一个首页；

    2、在首页右上角点击“设置”----在出现的窗口中点击“开始装扮博客”----在出现的首页顶栏选择“设置首页内容”；

         稍后便进入模块选项对话框，然后选择顶下面的“添加自定义模块”，片刻之后，就会出现一个自定义模块对话框；

    3、在自定义模块中选择flash----复制粘贴一个动画网址到出现的flash文本对话框中----点确定，这时，动画的代码就生成在自定义模块中了；

    4、选中、复制这段代码(ctrl+c)；

    5、跳到日志窗口，将复制的这段代码粘贴（ctrl+v）到“生成的动画代码”处，替换“生成的动画代码”这七个字；

    6、预览；

    7、发表日志。

四、看看效果：(这是加了两个动画的)

                说好了你回来的

五、在背景代码中添加一段文字特效代码：

    1、段落文字右移特效代码嵌入背景代码之中：

<DIV></DIV>
           <TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
           <TBODY>
           <TR>
           <TD background=图片地址><DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=550 height=293>
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=550 height=290>
<P align=left><FONT style="FONT-SIZE: 18pt; FILTER: WIDTH: 100%; COLOR: #ea0000; LINE-HEIGHT: 130%; FONT-FAMILY: 方正姚体" color=#ff0000>我带着远古的心愿<BR>你怀揣前世的祈盼<BR>我饱含如许的虔诚<BR>你浸润最深的期待<BR>我们跨越万水千山<BR>赴今世的约定...<BR>你感觉我深情凝眸的甜柔<BR>我倾听你心室澎湃的跳动<BR>白云轻盈飘荡<BR>星月神秘闪烁<BR><BR>燃烧的篝火旁<BR>我们席地而坐<BR>倾诉不尽的相思<BR>燃烧的火焰是不灭的炙热<BR>让我们一起出发<BR>背上快乐的行囊<BR>携着一路的欢唱<BR>踏着灿烂的芬芳<BR>望--天上云卷霞飞<BR>看--地下小桥流水<BR>拥--郁郁山川入怀<BR>枕--簇簇波浪入眠<BR>把--忧烦抛在身后<BR>让--愉悦洒满诗行 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>

说明:对蓝色处的宽与高的值均作了如下改动,width=440 height=170

                                            width=440 height=170

     改的目的就是要让文字特效的运动范围与效果图的大小相符,否则,背景图会自动加长加宽的.

         看看效果：

我带着远古的心愿
你怀揣前世的祈盼
我饱含如许的虔诚
你浸润最深的期待
我们跨越万水千山
赴今世的约定...
你感觉我深情凝眸的甜柔
我倾听你心室澎湃的跳动
白云轻盈飘荡
星月神秘闪烁

燃烧的篝火旁
我们席地而坐
倾诉不尽的相思
燃烧的火焰是不灭的炙热
让我们一起出发
背上快乐的行囊
携着一路的欢唱
踏着灿烂的芬芳
望--天上云卷霞飞
看--地下小桥流水
拥--郁郁山川入怀
枕--簇簇波浪入眠
把--忧烦抛在身后
让--愉悦洒满诗行

        2、给文字和动画加上来回起伏移动代码嵌入背景代码中：

<DIV></DIV>
           <TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
           <TBODY>
           <TR>
           <TD background=背景图片网址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=245><MARQUEE style="width: 435px; height: 155px" scrollAmount=3 behavior=alternate width=375><P align=center></P><P align=center><IMG src="动画图片网址"><FONT face=字体名称_GB2312 color=#ff0000 size=6><STRONG>输入文字处</STRONG></FONT><FONT face=字体名称 color=#800080 size=30><STRONG> </STRONG><BR> <P align=center></P><P align=center><IMG src="动画图片网址"><FONT face=字体名称_GB2312 color=#00ff00 size=6>输入文字处<BR>输入文字处</FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

说明:

    A、以<MARQUEE 代码开头，以</MARQUEE>结束的这一段代码是“来回起伏移动代码”，位于背景图代码中间；

    B、如果所有代码代入后,发现图片出现多余部分或文字动画运动不理想,就调整红色处的高度值( height)和宽度值(width),反复调试,直到理想为止,这一点是关键.

    C、gif格式的动态小图地址：http://love.xaonline.com/upload/2004612/UF488696.gif 这个图片现在链接不上了,请你另换一个gif格式的动态小图地址

    D、背景图片地址：http://img.blog.163.com/photo/D99sXgALjPcXQiogge3Tig==/4528650900297808464.jpg

      这个图片在我的相册里，如果我删了，就不显现了。所以建议要用你自己的。

看看效果:

欢迎光临

海珠儿博客乐园
请上我的浏览导航

评论这张

转发至微博

阅读(621)| 评论(2)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085067081082085066081087095095083086085064084085080070',
              blogTitle:' 怎样为背景透明的动画或文字特效添加一幅背景图',
              blogAbstract:'<P\><EM\>引用</EM\></P\>  <BLOCKQUOTE\><A target=\"_blank\" href=\"http://blog.163.com/gsd_432427/\" \>海珠儿</A\> 的 <A target=\"_blank\" href=\"http://blog.163.com/gsd_432427/blog/static/2291141200701211618374\" \>怎样为背景透明的动画或文字特效添加一幅背景图</A\><BR\>  <TABLE cellSpacing=\"3\" borderColorDark=\"#051414\" cellPadding=\"0\" width=\"100%\"  align=\"center\" borderColorLight=\"#297e7c\" background=\"http://xz1.2000y.net/348114/uploadpic/200412620850816.jpg\" border=\"1\" \>  <TBODY\>  <TR\>  <TD width=\"100%\"  \>  <TABLE cellSpacing=\"15\" cellPadding=\"0\" width=\"100%\"  align=\"center\" background=\"http://xz1.2000y.net/348114/uploadpic/200412620815881.gif\" border=\"0\" \>  <TBODY\>  <TR\>  <TD width=\"100%\"  \>  <TABLE\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></BLOCKQUOTE\>',
              blogTag:'博客,博客代码,博客技巧,超文本标记语言代码,html代码',
              blogUrl:'blog/static/70430365200871811193651',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1316889164673,
              publishTime:1219029576051,
              permalink:'blog/static/70430365200871811193651',
              commentCount:2,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'越是成熟的稻穗,就越懂得弯腰。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/70430365200871811193651">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

雨后惊鸿网易博客

导航

日志

怎样为背景透明的动画或文字特效添加一幅背景图

历史上的今天

最近读者

热度

评论

页脚