打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
动态文字特效代码
金钥匙〖动态文字特效代码〗
金钥匙欢迎你!☆ 沒能一一回訪,請諒解! 记得留言哦!☆
文字的动态特效处理与图片类似,都是 <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: 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>
踏破铁鞋无觅处得来全不费功夫
二、文字倾斜滚动
(一)代码格式 <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=#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>
. 菜鸟玩博也潇洒菜鸟玩博也潇洒
四、文字往复滚动
(一)代码格式
<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、示例三——文字交替跳跃
<CENTER><DIV style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 500px; COLOR: #ff6600; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>但</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>愿</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>人</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>长</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>久</B></CENTER></MARQUEE></MARQUEE></DIV></CENTER>
. 但愿人长久
4、示例四——带漂亮的模糊背景文字交替跳跃
<CENTER>
<DIV style="FONT-SIZE: 40pt; FILTER: glow(color: #00cc00,strength=60); WIDTH: 650px; COLOR: #ECF5FF; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=120 height=280>
<CENTER><B>千</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=210>
<CENTER><B>里</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=280>
<CENTER><B>共</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=210>
<CENTER><B>婵</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=280>
<CENTER><B>娟</B></CENTER></MARQUEE></DIV></CENTER>
. 千里共婵娟
5、示例五——文字交替跳跃消失
<P align=center>
<MARQUEE style="WIDTH: 500px; HEIGHT: 300px" scrollAmount=8 direction=up>
<CENTER>
<DIV style="FONT-SIZE: 40pt; FILTER: glow(color=BLUE,strength=50); WIDTH: 100%; COLOR: yellow; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=120 height=280>
<CENTER><B>菜</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=220>
<CENTER><B>鸟</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=280>
<CENTER><B>玩</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=120 height=220>
<CENTER><B>博</B></CENTER></MARQUEE></DIV></CENTER></MARQUEE></P>
.
菜鸟玩博
五、文字波浪式滚动
(一)文字单向波浪式滚动
<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>
.
菜鸟玩博也潇洒
(三)文字交替式游荡
<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 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代码编辑状态,将相关代码粘贴到合适位置,合理设置后再保存即可。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
帮你制作留言个性名片-图片上飘动的图片
漂亮字体及代码
代码入门教程(11)
教你如何制作滚动文字
文字向上滚动代码
动态文字代码
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服