动态文字特效代码

昵称604703 2010-05-13

展开全文

编辑：平安如意
平安如意欢迎你！☆ 沒能一一回訪，請諒解! 记得留言哦!☆
        文字的动态特效处理与图片类似，都是 <marquee>这个参数在起作用。给<marquee>加上合适的属性，就能使文字产生各种动态效果，从而给人带来美的享受。

        一、文字单向直线滚动
        (一)代码格式

<DIV align=center>
<MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 显示窗口宽度px; LINE-HEIGHT: 文字行间距pt; FONT-FAMILY: 字体; HEIGHT: 显示窗口高度px" scrollAmount=滚动速度值 direction=文字移动方向>
<P align=center><FONT color=文字颜色代码><B>文字内容</B> </FONT></P></MARQUEE></DIV>

        说明：文字滚动方向 direction= left 或right 或up 或down，分别表示向左(默认可省略)、向右、向上、向下。

        (二)效果示例
        1、示例一——文字左移

平安如意欢迎您

本例代码

   <DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 80px" scrollAmount=6>
<P align=center><FONT color=#f90b46>平安如意欢迎您 </FONT></P></MARQUEE></DIV>

         2、示例二——文字右移

您迎欢意如安平

本例代码

<P align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 楷体_gb2312; HEIGHT: 60px" scrollAmount=6 direction=right>
<P align=center><FONT color=#FF9224><B>您迎欢意如安平</B></FONT></P></MARQUEE></P>



         3、示例三——文字上移

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文彩云; HEIGHT: 120px" scrollAmount=3 direction=up>
<P align=center><FONT color=#B766AD><B>平安如意欢迎您</B></FONT></P></MARQUEE></DIV>






踏破铁鞋无觅处 得来全不费功夫


本例代码

<CENTER>
<MARQUEE scrollAmount=3 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>踏破铁鞋无觅处</B></FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=3 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>得来全不费功夫</B></FONT></CENTER></B></MARQUEE></CENTER></CENTER>



         4、示例四——文字下移

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; FILTER: glow(color=ffffff,strength=0) shadow(color=cccccc,direction:135); LINE-HEIGHT: 15pt; FONT-FAMILY: 华文新魏; HEIGHT: 120px" scrollAmount=3 direction=down>
<P align=center><FONT color=#008040><B>平安如意欢迎您</B></FONT></P></MARQUEE></DIV>

踏破铁鞋无觅处 得来全不费功夫

本例代码

<CENTER>
<MARQUEE scrollAmount=3 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#ff9224 size=6><B>踏破铁鞋无觅处</B></FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=3 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#ff9224 size=6><B>得来全不费功夫</B></FONT></CENTER></B></MARQUEE></CENTER></CENTER>

        二、文字倾斜滚动
        (一)代码格式

<DIV align=center>
<MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 显示窗口宽度px; LINE-HEIGHT: 文字行间距pt; FONT-FAMILY: 字体; HEIGHT: 显示窗口高度px" scrollAmount=滚动速度值 direction=D1>
<DIV align=center>
<MARQUEE scrollAmount=滚动速度值 direction=D2><FONT color=文字颜色代码>文字内容</FONT></MARQUEE></DIV></MARQUEE></DIV>

        说明：direction=D1=left 或right，direction=D2=up 或down。

         (二)效果示例
        1、示例一——文字自左上向右下滚动

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: shadow(color=#333366,direction=240); LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 200px" scrollAmount=5 direction=right>
<DIV align=center>
<MARQUEE scrollAmount=2 direction=down><FONT color=#3333ff><B>平安如意欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>



         2、示例二——文字自右上向左下滚动

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=5); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文行楷; HEIGHT: 200px" scrollAmount=5>
<DIV align=center>
<MARQUEE scrollAmount=2 direction=down><FONT color=#ff0000><B>平安如意欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>



         3、示例三——文字自左下向右上滚动

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033); LINE-HEIGHT: 15pt; FONT-FAMILY: 华文新魏; HEIGHT: 200px" scrollAmount=5 direction=right>
<DIV align=center>
<MARQUEE scrollAmount=2 direction=up><FONT color=#ff0000><B>平安如意欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>

         4、示例四——文字自右下向左上滚动

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: mask(color=#a09261) shadow(color=#000000,direction=135) chroma(color=#a09261); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文新魏; HEIGHT: 200px" scrollAmount=5>
<DIV align=center>
<MARQUEE scrollAmount=2 direction=up><FONT color=#ff0000><B>平安如意欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>

        三、文字反相滚动
        (一)代码格式

<P align=center>
<MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 显示窗口宽度px; LINE-HEIGHT: 文字行间距pt; FONT-FAMILY: 字体; HEIGHT: 显示窗口高度px" scrollAmount=文字滚动速度 direction=文字滚动方向1>
<FONT color=文字颜色代码>
文字内容
</FONT>
</MARQUEE>
<MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 显示窗口宽度px; LINE-HEIGHT: 文字行间距pt; FONT-FAMILY: 字体; HEIGHT: 显示窗口高度px" scrollAmount=文字滚动速度 direction=文字滚动方向2>
<FONT color=文字颜色代码>
文字内容
</FONT></MARQUEE>
</P>

        说明：1、关于direction：文字滚动方向1与文字滚动方向2始终为反相。
        2、当水平反相滚动时，width之值为显示窗口宽度的1/2；当垂直反相滚动时，height之值为显示窗口高度的1/2。

         (二)文字水平反相滚动
        1、示例一——文字自中间向左右两边滚动

平安如意欢迎您您迎欢意如安平

本例代码

<P align=center>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px" scrollAmount=5><FONT color=#0000ff>平安如意欢迎您</FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px" scrollAmount=5 direction=right><FONT color=#0096ff>您迎欢意如安平</FONT></MARQUEE></P>



         2、示例二——文字自左右两边向中间滚动

您迎欢意如安平平安如意欢迎您

本例代码

<P align=center>
<MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文彩云; HEIGHT: 60px" scrollAmount=3 direction=right><FONT color=#e4dc9b>您迎欢意如安平</FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文彩云; HEIGHT: 60px" scrollAmount=3><FONT color=#e4dc9b>平安如意欢迎您</FONT></MARQUEE></P>


        (三)文字垂直反相滚动
        1、示例一——文字自中间向上下滚动

菜鸟玩博也潇洒菜鸟玩博也潇洒

本例代码

<P align=center>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 50px" scrollAmount=2 direction=up align=center><FONT color=#0000ff>菜鸟玩博也潇洒</FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 50px" scrollAmount=2 direction=down>
<TABLE style="FILTER: FlipV" align=center>
<FONT color=#0096ff>菜鸟玩博也潇洒</FONT><TBODY></TBODY></TABLE></MARQUEE>
</P>



         2、示例二——文字自上下向中间滚动

菜鸟玩博也潇洒菜鸟玩博也潇洒

本例代码

<P align=center>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 40px" scrollAmount=2 direction=down><FONT color=#0000ff>菜鸟玩博也潇洒</FONT></MARQUEE>
<MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 40px" scrollAmount=2 direction=up><FONT color=#0096ff>菜鸟玩博也潇洒</FONT></MARQUEE></P>

        四、文字往复滚动
        (一)代码格式


<DIV align=center>
<MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 显示窗口宽度px; LINE-HEIGHT: 文字行间距pt; FONT-FAMILY: 字体; HEIGHT: 显示窗口高度px" scrollAmount=文字滚动速度 behavior=alternate direction=D>
<P align=center><FONT color=文字颜色代码>文字内容</FONT></P></MARQUEE>
</DIV>

        说明：水平往复滚动(摆动)时，direction=D=left 或可缺省；垂直往复滚动(振动)时，direction=D=up。

        (二)效果示例
        1、示例一——文字水平往复滚动(摆动)

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=#ff0000<br>,strength=6); WIDTH: 600px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文行楷; HEIGHT: 80px" scrollAmount=10 direction=right behavior=alternate>
<P align=center><FONT color=#ffff00>平安如意欢迎您</FONT></P></MARQUEE></DIV>

         2、示例二——文字垂直往复滚动(振动)

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; FILTER: shadow(color=#87CEFA, strength=50); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 180px" scrollAmount=10 direction=up behavior=alternate>
<P align=center><FONT color=#1e90ff>平安如意欢迎您</FONT></P></MARQUEE></DIV>

         3、示例三——文字交替跳跃

但愿人长久

本例代码

4、示例四——带漂亮的模糊背景文字交替跳跃

千里共婵娟

本例代码

5、示例五——文字交替跳跃消失

菜鸟玩博

本例代码

五、文字波浪式滚动
(一)文字单向波浪式滚动

平安如意欢迎您

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 华文新魏; HEIGHT: 180px" scrollAmount=5 direction=up behavior=alternate>
<DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=460>
<DIV align=center><FONT color=#ff0033><B>平安如意欢迎您</B></FONT></DIV></MARQUEE></DIV></MARQUEE></DIV>

(二)文字往复波浪式滚动

菜鸟玩博也潇洒

本例代码

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 隶书; HEIGHT: 250px" scrollAmount=5 direction=up behavior=alternate>
<DIV align=center>
<MARQUEE scrollAmount=5 behavior=alternate width=600>
<DIV align=center><FONT color=#ff0033><B>菜鸟玩博也潇洒</B></FONT></DIV></MARQUEE></DIV></MARQUEE></DIV>

(三)文字交替式游荡

平安如意欢迎朋友您

        六、文字竖排渐出效果
        这种特效用于显示诗歌尤其古诗词效果很好，若加上合适的背景则效果更好！

水调歌头
苏轼

明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
唯恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟

我欲乘风归去
唯恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟

示例一——无背景文字竖排渐出效果

示例二——有背景文字竖排渐出效果

<TABLE height=338 cellSpacing=0 borderColorDark=#aab8ee cellPadding=0 width=450 align=center borderColorLight=#aab8ee background=http://img.photo.163.com/nwgoVlilgAwuUDUFx1KPHA==/662310620200613717.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=380 height=180>
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=380 height=180>
<P align=left><FONT style="FONT-SIZE: 16pt; FILTER: WIDTH: 100%; COLOR: #d9ffff; 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>起舞弄清影<BR>何似在人间<BR>转朱阁<BR>低绮户<BR>照无眠<BR>不应有恨<BR>何事长向别时圆<BR>人有悲欢离合<BR>月有阴晴圆缺<BR>此事古难全<BR>但愿人长久<BR>千里共婵娟 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>

示例二代码

        七、文字与图片相对运动特效
        (一)文字在图片间穿梭效果

国国 庆庆 快快 乐乐

(二)文字从图片上部穿过效果

菜

鸟

玩

博

(三)文字在图片中游荡效果

平安如意欢迎您

<TABLE style="WIDTH: 650px; HEIGHT: 139px" borderColor=#00fa9a height=139 width=650 align=center background=http://image9.360doc.com/DownloadImg/2010/05/1314/3185755_2.jpg border=3>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=130>
<MARQUEE scrollAmount=3 behavior=alternate width=620><IMG src="http://img.photo.163.com/cmstqVffIaAWrp0svC7Msg==/147774362774718602.gif">
<FONT face=华文行楷 color=#800080 size=6><B><FONT face=楷体_GB2312 color=#00ffff>平安如意欢迎您</FONT>
<IMG src=" http://img.photo.163.com/QVaf6xvlEjtvFHXktDTIzQ==/147774362774718604.gif"></B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

附注

        1、各主要参数的含义：
        align：是设定活动对象(图片或文字)的位置；
        direction：用于设定活动对象的滚动方向是向左、向右、向上、向下；
        Behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端；behavior="slide" 表示由一端滑动到另一端，且不再重复；behavior="alternate"表示在两端之间来回滚动。
        Height：用于设定滚动对象的高度；
        Width：则设定滚动对象的宽度；
        Hspace和vspace：分别用于设定滚动对象的左右边框和上下边框的宽度；
        Scrollamount：用于设定活动对象的滚动距离；数值越大滚动越快；
        scrolldelay：用于设定滚动两次之间的延迟时间，数值越大越有跳跃感；
        Loop：用于设定滚动的次数，不设置该值则为无限循环；
        <marquee>标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
        2、代码使用方法：
        (1)放于博客主页：在编辑状态下，依次进入“装扮博客”、“设置首页内容”，选择“添加自定义模块”，将代码粘贴到模块中，合理设置后再保存即可。
        (2)放于日志中：在编辑状态下，进入写日志或编辑原有日志，依次点击“全部功能”、“<>”按钮，进入HTML代码编辑状态，将相关代码粘贴到合适位置，合理设置后再保存即可。