文字滚动代码大全
Good fun编辑
在制作滚动特效前,我们先来了解一下有关文字的一些基本代码属性,这样方便朋友们更好的应用代码:
下面是一段简单的文字插入代码:
<P align=center><FONT color=#0066ff face=隶书 size=5>插入文字</FONT></P>
文字插入代码基本属性如下: |
align=center 表示字体居中,可选值为居右(right)居(left)
color=颜色代码 具体颜色代码可参照:网易博客代码(颜色代码)
face=字体 常用字体为:宋体.黑体.楷体.仿宋.新宋体.细明体等
size=字体大小,这里的最大值为7 ,取值越大文字就越大 这里Good fun提示朋友,在文字特效代码里有时候用“style=font:40pt ”来表示文字的大小,你可以改变数值“40”来改变大小! |
我们了解完文字插入代码后,只能用代码来定义文字的显示,怎么让它动起来,不要急,我们还的来了解一下有关文字滚动的一些基本属性,先来看一段文字滚动的基本代码:
<marquee direction=right scrollamount=2 ><FONT color=#0066ff face=隶书 size=5>你的文字</FONT></marquee>
文字滚动基本代码属性如下: |
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)
【Good fun提示:这里的“direction=移动方向”可以用“behavior=移动效果”来表示,例: behavior=scroll 一圈一圈绕着走 behavior=slide 只走一次 behavior=alternate 来回走】
scrollamount=移动速度数值 |
了解完这些后我们来看一些基本的文字滚动效果及代码:
文字基本滚动效果和代码如下: |
向右走:
向左走:
来回走:
向上走:
向右走: <marquee direction=right scrollamount=3 ><FONT color=#0066ff face=隶书 size=5>Good fun博客</FONT></marquee>
向左走:
<marquee direction=left scrollamount=6 ><FONT color=#000000 face=华文行楷 size=5>Good fun博客</FONT></marquee>
来回走:
<marquee behavior=alternate scrollamount=9 ><FONT color=#339966 face=华文彩云 size=5>Good fun博客</FONT></marquee>
向上走:
<MARQUEE scrollAmount=2 scrollDelay=80 direction=up width=200 height=50><FONT face=华文彩云 color=#cc36d7 size=5>Good fun博客</FONT></MARQUEE>
Good fun提示:这里向上走的代码里出现新的滚动属性代码: “scrollDelay=80”,这个“80”是滚动的距离,可以改变数值来改变滚动距离,向左向右走的代码也可以用此来增加定义!
“width=200 height=50”分别是滚动的文字区域的宽度和高度,可以改变“=”号后面的数值来改变显示的大小。这里的高度和文字的滚动高度不冲突!可以自由设置! |
下面是一些文字特效的效果及代码:
HTML代码复制如下: |
<DIV align=center><P style="MARGIN-LEFT: 10px"> <MARQUEE style="FONT-SIZE: 20pt; FILTER: Wave(freq=5, light=20, phase=100, strength=6); WIDTH: 320px; COLOR: red; FONT-FAMILY: ??; HEIGHT: 150px" scrollAmount=1 scrollDelay=100 direction=up><FONT color=red>感谢光临Good fun新博<BR>感谢光临Good fun新博<BR>感谢光临Good fun新博<BR>感谢光临Good fun新博<BR>感谢光临Good fun新博<BR>感谢光临Good fun新博<BR><BR></FONT></MARQUEE></P></DIV> |
本效果HTML代码复制如下: |
<P align=center><BR> <TABLE cellSpacing=0 cellPadding=0 align=center background=http://image50.360doc.com/DownloadImg/2012/03/1306/22260893_2.gif> <TBODY><TR><TD style="FILTER: chroma(color=#336699)"> <TABLE align=center background=http://image50.360doc.com/DownloadImg/2012/03/1306/22260893_3.jpg width=500 height=120><TBODY><TR><TD align=middle><FONT size=7 style="FONT-WEIGHT: normal; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#336699><B>钟成感谢您的光临!</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P> |
本效果HTML代码复制如下: |
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: 00cc00,strength=40); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"> <MARQUEE direction=up behavior=alternate width=120 height=240> <CENTER><B>钟</B></CENTER></MARQUEE> <MARQUEE direction=up behavior=alternate width=120 height=180> <CENTER><B>成</B></CENTER></MARQUEE> <MARQUEE direction=up behavior=alternate width=120 height=240> <CENTER><B>欢</B></CENTER></MARQUEE> <MARQUEE direction=up behavior=alternate width=120 height=180> <CENTER><B>迎</B></CENTER></MARQUEE> <MARQUEE direction=up behavior=alternate width=120 height=240> <CENTER><B>您</B></CENTER></MARQUEE></FONT></CENTER> |
本效果HTML代码复制如下: |
<MARQUEE behavior=alternate direction=up height=200 scrollAmount=5><MARQUEE scrollAmount=2 width=660> <IMG src="图片地址"><FONT color=red face=楷体_gb2312 size=7>欢迎光临Goodfun的博客</FONT></MARQUEE></MARQUE></MARQUEE> |
欢迎光临钟成的博客
客博的成钟临光迎欢
本效果HTML代码复制如下: |
<MARQUEE width=340 height=50><FONT face=隶书 color=#0000ff size=7>欢迎光临钟成的博客</MARQUEE></FONT><FONT face=隶书 color=#0000ff size=7> <MARQUEE direction=right width=340 height=50>客博的成钟临光迎欢</FONT></MARQUEE> |
|