动态文字特效代码

仰望真理 2015-08-06

展开全文

金钥匙的〖动态文字特效代码〗

☆动态文字特效代码 - 学海 - XVE HAI BLOG 金钥匙欢迎你！☆ 沒能一一回訪，請諒解! 记得留言哦!☆

文字的动态特效处理与图片类似，都是 <marquee>这个参数在起作用。给<marquee>加上合适的属性，就能使文字产生各种动态效果，从而给人带来美的享受。

一、文字单向直线滚动

(一)代码格式

说明：文字滚动方向 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: 500px; 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>

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

二、文字倾斜滚动

(一)代码格式

说明：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>

金钥匙欢迎您

三、文字反相滚动

(一)代码格式

说明：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=#0000ff>您迎欢匙钥金</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: 380px; 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>

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

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=#0000ff>菜鸟玩博也潇洒</FONT></MARQUEE></P>

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

四、文字往复滚动

(一)代码格式

说明：水平往复滚动(摆动)时，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 style="WIDTH: 650px; HEIGHT: 139px" borderColor=#00fa9a height=139 width=650 align=center background=http://image87.360doc.com/DownloadImg/2015/08/0614/56826479_1.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代码编辑状态，将相关代码粘贴到合适位置，合理设置后再保存即可。