.

日志

关于我

隆力奇玉洁老师

文章分类

文字特效代码（2）

2010-01-10 15:40:47| 分类：博客技巧 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

特效文字代码（2）

1.最简单的文字不链接滚动条设置

带滑动条的表格

看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格

代码：

<TABLE width=260 align=center border=0>
<TBODY>
<TR>
<TD bgColor=cyan><FONT color=#0000ff><B>带滑动条的表格</B></FONT></TD></TR>
<TR>
<TD bgColor=ffffff>
<DIV style="OVERFLOW: auto; HEIGHT: 80px">

看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。

由下向上滚动文字代码：

<marquee scrollamount="2" scrolldelay="0" direction="up" width="330" height="120" border="0" align="center" >
欢迎光临雪山孤鸿的小屋
</marquee>
3.背景图片＋图片方法：

文

章

代码：

<TABLE align=center background=http://img.blog.163.com/photo/1ewySydop_n0hjnhCaI67Q==/322570323310479663.jpg border=6 cellSpacing=2 borderColor=#1E90FF width=500><TBODY><TR><TD>文章</TD></TBODY></TABLE>

4.字体后面加入背景色

欢迎光临雪山孤鸿的小屋

代码：

><FONT style="BACKGROUND-COLOR: #3366ff" color=#000000 size=5>欢迎光临蓝色妖姬的小屋</FONT>

style="BACKGROUND-COLOR: #3366ff"(背景颜色)
color=#000000 "（字体颜色）

5.有边框且有底色方法：

有边框且有底色的语法：举例一

代码：

<table borderColor="#000000" cellSpacing="2" cellPadding="3" width="100%" bgColor="#0997f7" border="10"><tbody><tr><td>有边框且有底色的语法：举例一 </td></tr></tbody></table>
6.使题目动起来：

雪山孤鸿欢迎你！

代码：

（1）循环左移：<marquee>雪山孤鸿欢迎你们</marquee>

欢迎你

代码：

（2）左右弹撞：<marquee behavior="alternate">欢迎你</marquee>

7.自下而上滚动文字：

真诚欢迎朋友们光临,您的到来会给小屋增添更多活力、精彩与欢乐！

代码：

<MARQUEE style="WIDTH: 200px; HEIGHT: 266px" scrollAmount=2 direction=up width=200 height=266 align="center"><FONT color=#ff0000 size=5>蓝色妖姬真诚欢迎朋友们光临,您的到来会给小屋增添更多活力、精彩与欢乐！</FONT></MARQUEE>

8.特效文字代码

（1）中空文字代码：

雪山孤鸿

代码：

（2）立体感特效文字代码

雪山孤鸿

代码：

（3）带彩色阴影特效文字代码

雪山孤鸿

代码：

(4)凸起立体感特效文字代码

雪山孤鸿

代码：

（5）套边立体感特效文字代码

雪山孤鸿

代码：

（6）七彩文字背景代码

雪山孤鸿

代码：
<TABLE style="WIDTH: 500px; HEIGHT: 140px" align=center background=http://99927.com/client/zcsl/200644152842607.GIF border=0>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#000000)" align=middle>
<P><FONT style="FONT-SIZE: 38pt" face=华文行楷 color=#336699 size=3><B></B></FONT> </P>
<P><FONT style="FONT-SIZE: 38pt" face=华文行楷 color=#336699 size=7><B>雪山孤鸿</B></FONT></P>
<P><STRONG><FONT face=华文行楷 color=#336699 size=3></FONT></STRONG> </P></TD></TR></TBODY></TABLE><P></P>

(7)图片插入文字特效代码

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" src="http://99927.com/client/zcsl/200644162842796.GIF">欢迎你0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" src="http://99927.com/client/zcsl/200644162842796.GIF">

代码：

（8）文字移动代码：

安德烈．瑞欧在专辑《爱在世界的每个角落》再度以他独特的編曲技法，融合古典与轻音乐大乐团的演出方式，演出一首又一首世人耳熟能祥的乐曲。选曲切合专辑的名称，從奧斯卡金曲〈世事当如此〉，到俄罗斯民谣〈黑眼珠〉；从維也納圓舞曲〈風流寡婦〉，到法國香頌經典〈巴黎天空下〉，每一首都是深具代表性與地方色彩的動人樂曲，欣賞這張專輯，乐迷更能深入體會到「音樂無國界」的意義。

代码：

<MARQUEE scrollAmount=1 direction=up><P align=center> <FONT color=#ffddaa size=4>安德烈．瑞欧在专辑《爱在世界的每个角落》再度以他独特的編曲技法，融合古典与轻音乐大乐团的演出方式，演出一首又一首世人耳熟能祥的乐曲。选曲切合专辑的名称，從奧斯卡金曲〈世事当如此〉，到俄罗斯民谣〈黑眼珠〉；从維也納圓舞曲〈風流寡婦〉，到法國香頌經典〈巴黎天空下〉，每一首都是深具代表性與地方色彩的動人樂曲，欣賞這張專輯，乐迷更能深入體會到「音樂無國界」的意義。</MARQUEE>

(9)彩色字体色彩绚丽

彩色字体色彩绚丽

代码：

</font><br>
<P align=center><STRONG><FONT size=6><FONT face=华文新魏><FONT color=#ff0000>彩
</FONT><FONT color=#ff8900>色</FONT><FONT color=#92c000>字</FONT><FONT color=#00c024>体</FONT><FONT color=#00c0da>色</FONT><FONT color=#0053ff>彩</FONT><FONT color=#4800ff> 绚</FONT><FONT color=#ff00ff>丽</FONT></FONT></FONT></STRONG></P>

（10）抛射字体

雪山孤鸿

代码：

（11）带背景的闪光字体（背景图片可以换）

带背景的闪光字体（背景图片可以换）

代码：

<P align=center><BR>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://616bbs.vicp.net/picture/yn/hexiang/st4.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=http://lanxinzhu.nease.net/wangye/beijin/x1.jpg>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699><B>带背景的闪光字体（背景图片可以换）</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

（12）向下移动的文字

向下移动的文字

（13）向右移动的文字

欢迎你欣赏

代码：

<P align=center><BR></P>
<P align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=10 direction=right>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>欢迎你欣赏</B></FONT></P></MARQUEE></P>

（14）波浪式的文字

vior=altrnate width=460 src="">0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

波浪式的文字

代码：

</font><br><P align=center> </P>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=460 <IMG src="">
<DIV align=center><FONT face=隶书 color=red size=7>波浪式的文字</FONT></DIV></MARQUEE></DIV></MARQUE></MARQUEE>

（15）原地跳动的文字

原地跳动文字

代码：

（16）交替跳跃的文字

交替跳跃文字

代码：

(17)模糊的背景字

模糊背景字

代码：

（18）穿梭的文字

穿　穿0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" height=97 src="http://img.photo.163.com/OyIH24ordFHEgB97jObJTA==/147492887801605811.jpg" width=130> 梭梭0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" height=97 src="http://img.photo.163.com/OyIH24ordFHEgB97jObJTA==/147492887801605811.jpg" width=130> 文文0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" height=97 src="http://img.photo.163.com/OyIH24ordFHEgB97jObJTA==/147492887801605811.jpg" width=130> 字字

代码：

（19）彩虹文字

彩虹字体

代码：

（20）发光文字：

要修改的文字

代码：

<TABLE style="FILTER: glow(color=#6699FF,direction=2)"><FONT color=#ffffff size=2>
<P align=center><FONT size=4>                          要修改的文字</FONT></FONT></P>
<TBODY>
<P align=center><FONT size=4></FONT> </P></TBODY></TABLE>

其中color是阴影的颜色，可以配合网页色调改变，direction是设置阴影的强度，font color是原字体的颜色。

（21）浮雕的文字：

要修改的文字

代码：

<TABLE style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1)"><FONT color=#ffffff>要修改的文字</FONT>
<TBODY></TBODY></TABLE>

（22）七彩文字:

雪山孤鸿

代码：

评论这张

转发至微博

阅读(84)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083069080086080070087081085095085084089064093083087066093',
              blogTitle:'文字特效代码（2）',
              blogAbstract:'<DIV style=\"FONT-SIZE: 14px;\"  \>  <P style=\"MARGIN: 20px auto 10px;\"  \><SPAN style=\"FONT-FAMILY: \'微软雅黑\',\'黑体\',Arial,Helvetica,Sans-Serif;\"  \>特效文字代码（2）</SPAN\></P\>  <DIV style=\"MARGIN-BOTTOM: 15px;\"  \>  <DIV\> </DIV\></DIV\>  <DIV\>  <DIV\>  <DIV\>  <TABLE borderColor=\"#ff0000\" height=\"900\" width=\"700\" border=\"15\" \>  <TBODY\>  <TR\>  <TD vAlign=\"top\" background=\"图片地址\" \>  <P\><FONT color=\"#00ff00\" \><FONT color=\"#ff6600\" size=\"4\" \>1.最简单的文字不链接滚动条设置 <BR\></FONT\></FONT\></P\>  <TABLE width=\"260\" align=\"center\" border=\"0\" \>  <TBODY\>  <TR\>  <TD bgColor=\"cyan\" \><FONT color=\"#ffffff\" \><B\>带滑动条的表格</B\></FONT\></TD\></TR\>  <TR\>  <TD bgColor=\"yellow\" \>  <DIV style=\"OVERFLOW: auto; HEIGHT: 80px;\"  \>看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格</DIV\></TD\></TR\></TABLE\>  <P\></P\></TD\></TR\></TABLE\></DIV\></DIV\></DIV\></DIV\>',
              blogTag:'',
              blogUrl:'blog/static/1283951192010010424235',
              isPublished:1,
              istop:false,
              type:1,
              modifyTime:1317346929984,
              publishTime:1263109247613,
              permalink:'blog/static/1283951192010010424235',
              commentCount:0,
              mainCommentCount:0,
              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/1283951192010010424235">${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 - 订阅此博客

.

导航

日志

文字特效代码（2）

历史上的今天

最近读者

热度

评论

页脚