动态文字特效代码
编辑:仙灵子风水馆
文字的动态特效处理与图片类似,都是 <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、示例一——文字左移
2、示例二——文字右移
3、示例三——文字上移
4、示例四——文字下移
二、文字倾斜滚动
(一)代码格式
<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、示例一——文字自左上向右下滚动
2、示例二——文字自右上向左下滚动
3、示例三——文字自左下向右上滚动
4、示例四——文字自右下向左上滚动
三、文字反相滚动
(一)代码格式
<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、示例一——文字自中间向左右两边滚动
2、示例二——文字自左右两边向中间滚动
(三)文字垂直反相滚动
1、示例一——文字自中间向上下滚动
2、示例二——文字自上下向中间滚动
四、文字往复滚动
(一)代码格式
<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、示例一——文字水平往复滚动(摆动)
2、示例二——文字垂直往复滚动(振动)
3、示例三——文字交替跳跃
<MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 华文行楷; HEIGHT: 250px" scrollAmount=8 direction=right behavior=alternate><STRONG><FONT color=#aaaaff>
<MARQUEE direction=up behavior=alternate width=50 height=200 align="middle">平</MARQUEE><FONT color=#ff0000>
<MARQUEE direction=up behavior=alternate width=50 height=150>安</MARQUEE><FONT color=#ffff37>
<MARQUEE direction=up behavior=alternate width=50 height=200>如</MARQUEE><FONT color=#ff00ff>
<MARQUEE direction=up behavior=alternate width=50 height=150>意</MARQUEE><FONT color=#ff8000>
<MARQUEE direction=up behavior=alternate width=50 height=200>欢</MARQUEE><FONT color=#00ff00>
<MARQUEE direction=up behavior=alternate width=50 height=150>迎</MARQUEE><FONT color=#00ffff>
<MARQUEE direction=up behavior=alternate width=50 height=200>朋</MARQUEE><FONT color=#ffff37>
<MARQUEE direction=up behavior=alternate width=50 height=150>友</MARQUEE><FONT color=#ff44ff>
<MARQUEE direction=up behavior=alternate width=50 height=200>您</MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></STRONG></MARQUEE>
<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>