360doc
帮助  |  留言交流  | 
首页 我的图书馆 主题阅读 精彩目录 精品文苑 Tags 会员浏览 好书推荐
HTML特效字体（转载）
灯下听雨 收录于2010-06-27 阅读数：
公众公开 
 原文来源　
tags： HTML 字体

以下所有字体和文字特效，均用HTML语言完成，不用下载和使用任何专用软件。当然，使用专用软件可以使文字变化更多一些。朋友们不妨试一试，我们一起学习。

一、彩色字体
衣带渐宽终不悔，为伊消得人憔悴。
 衣带渐宽终不悔，为伊消得人憔悴。
 衣带渐宽终不悔，为伊消得人憔悴。

衣带渐宽终不悔，为伊消得人憔悴。

代码

<P align=center><STRONG><FONT size=6><FONT face=华文新魏><FONT color=#ff0000>衣</FONT><FONT color=#ff8900>带</FONT><FONT color=#92c000>渐</FONT><FONT color=#00c024>宽</FONT><FONT color=#00c0da>终</FONT><FONT color=#0053ff>不</FONT><FONT color=#4800ff>悔</FONT><FONT color=#ff00ff>，</FONT><FONT color=#ff00ff>为</FONT><FONT color=#4900ff>伊</FONT><FONT color=#0052ff>消</FONT><FONT color=#00c0db>得</FONT><FONT color=#00c025>人</FONT><FONT color=#91c000>憔</FONT><FONT color=#ff8a00>悴</FONT><FONT color=#ff0000>。</FONT></FONT></FONT></STRONG></P>

二、阴影字体

 

日出江花红胜火  春来江水绿如蓝

 

日出江花红胜火  春来江水绿如蓝

日出江花红胜火  春来江水绿如蓝

 

日出江花红胜火  春来江水绿如蓝

 

代码

<P align=center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=333366
); WIDTH: 631px; COLOR: #3333ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文新宋; HEIGHT: 51px"></P>
<P align=center>日出江花红胜火&nbsp; 春来江水绿如蓝</P></FONT>

三、圈边字体

百荷 音画驿站

 

代码

<P align=center>&nbsp;</P><FONT style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=5); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">
<P align=center><B>相思宁蔓 相思宁蔓</B></P></FONT>

四、投影字体

幽幽百荷 幽幽百荷

代码

<P align=center>&nbsp;</P>
<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 40px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#000099>相思宁蔓 相思宁蔓</FONT></CAPTION> <BR></CAPTION></P>

 

五、抛射字体
 
你是我永远的牵挂

代码

<DIV align=center>
<DIV style="FILTER: shadow(color=#FF9999
, strength=60); WIDTH: 480px; HEIGHT: 121px"><FONT face=华文彩云 color=#ff0000 size=7><B>
<CENTER>你是我永远的牵挂</B></CENTER></FONT>
<DIV align=left><BR><BR></DIV></DIV></DIV>
<P align=left>&nbsp;</P>

六、带背景的闪光字体（背景图片可以换）

千里有缘是朋友


代码

<P align=center><BR>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://616bbs.vicp.net/picture/yn/hexiang/st4.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=http://616bbs.vicp.net/picture/yn/hexiang/62.jpg>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 56pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_gb2312 color=#336699><B>千里有缘是朋友</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

七、向上移动的文字

我在你的眼你

代码

<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8 direction=up>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>我你的眼你</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>

八、向下移动的文字


你在我的心里

代码
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8 direction=down>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>你在我的心里</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
九、向左移动的文字


幽幽百荷

 
代码
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=8>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>相思宁蔓</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>
 
十、向右移动的文字


幽幽百荷你好吗？

代码

<P align=center><BR></P>
<P align=center>
<MARQUEE style="WIDTH: 397px; HEIGHT: 200px" scrollAmount=10 direction=right>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>相思宁蔓你好吗？</B></FONT></P></MARQUEE></P>

十一、由中间向两边移动的文字和图像

 

相思百荷 相思百荷

代码

<P align=center>&nbsp;</P>
<P align=center><FONT face=华文彩云 color=#ee110e size=7>
<MARQUEE width=200 height=50><IMG onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick=javascript:window.open(this.src); src="http://freequick.myrice.com/rw/ts/43.gif" onload="javascript:if(this.width>screen.width-320)this.style.width=screen.width-320;">相思宁蔓</FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=7><FONT face=华文彩云 color=#ee1111 size=7>
<MARQUEE direction=right width=200 height=50>相思宁蔓<IMG onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick=javascript:window.open(this.src); src="http://freequick.myrice.com/rw/ts/23.gif" onload="javascript:if(this.width>screen.width-320)this.style.width=screen.width-320;"></FONT></MARQUEE></FONT></FONT></P></FONT>

十二、由上下向中间移动的字体

相思百荷

相思百荷
代码
 
<P align=center>&nbsp;</P>
<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=7><B>相思宁蔓</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=7><B>相思宁蔓</FONT></CENTER></B></MARQUEE></CENTER></CENTER>
 

十三、文字来回走


请喝一杯红咖啡

代码

<P align=center>&nbsp;</P>
<P align=center>
<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"><BR>
<DIV align=center>
<MARQUEE scrollAmount=8 behavior=alternate ?WIDTH: 397px; HEIGHT: 200px?>
<P align=center><FONT face=隶书 color=#ff0000 size=7><B>喝一杯红咖啡</B></FONT></P></MARQUEE></DIV></TD></TR></TBODY></TABLE></P>

十四、文字波浪式移动

愿你的人生绚丽

代码

<P align=center>&nbsp;</P>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=460 <IMG src="http://www.east128.com/bbs/UploadFile/2003-9/20039251018214901.gif">
<DIV align=center><FONT face=隶书 color=red size=7>愿你的人生绚丽</FONT></DIV></MARQUEE></DIV></MARQUE></MARQUEE>

十五、左右运动的文字

 相思百荷
相思百荷
代码
<DIV align=center>
<MARQUEE direction=right width=250 height=50>
<DIV align=center>&nbsp;<FONT face=隶书 color=#ff0000 size=7>相思宁蔓</FONT></DIV></MARQUEE></DIV>
<DIV align=center>
<MARQUEE width=250 height=50>
<DIV align=center><FONT face=隶书 color=#ff0000 size=7>相思宁蔓</FONT></DIV></MARQUEE></DIV>
十六、双排向下运动的文字
 
去年今日此门中
人面桃花相映红
代码
<CENTER>
<MARQUEE scrollAmount=3 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>去年今日此门中</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=3 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>人面桃花相映红</FONT></CENTER></B></MARQUEE></CENTER></CENTER>
十七、双排向上运动的文字
去年今日此门中
人面桃花相映红
代码
<CENTER>
<MARQUEE scrollAmount=3 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>去年今日此门中</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=3 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>人面桃花相映红</FONT></CENTER></B></MARQUEE></CENTER></CENTER>
十八、倒影字
其实倒影字就这么简单！其实倒影字就这么简单！
代码
<P align=center><FONT style="FONT-SIZE: 30pt; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B><EM>其实倒影字就这么简单！</EM></B></FONT><FONT style="FONT-SIZE: 30pt; FILTER: FlipV; WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B><EM>其实倒影字就这么简单！</EM></B></FONT></P>
十九、交替游荡的文字


雨韵为水　


雨韵为水　

代码

<P align=center><BR>
<MARQUEE direction=right behavior=alternate><B><FONT color=#990099 size=6 FONT><BR>
<MARQUEE style="WIDTH: 248px; HEIGHT: 200px" direction=up behavior=alternate width=248 height=200 align="middle">雨&nbsp;韵&nbsp;为&nbsp;水　</MARQUEE><FONT color=red><BR>
<MARQUEE style="WIDTH: 246px; HEIGHT: 150px" direction=up behavior=alternate width=246 height=150>雨 韵为 水　<BR></MARQUEE><FONT color=#ff0000></FONT></B></FONT></FONT></FONT></MARQUEE></P>

二十、原地齐跳的文字

但
愿
人
长
久

代码

<DIV></DIV></B>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #0033ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>但</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>愿</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>人</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>长</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>久</B></CENTER></MARQUEE></FONT></CENTER>

二十一、交替跳跃的文字

千
里
共
婵
娟

代码

<DIV></DIV></B>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; 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></FONT></CENTER>

还可以为它们加上漂亮的模糊背景

但
愿
人
长
久
代码
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: 00cc00,strength=60); 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>
二十二、交替跳跃消失的文字

寧
蔓
爱
你

 

代码
<P align=center>
<MARQUEE style="WIDTH: 523px; HEIGHT: 200px" scrollAmount=8 direction=up>
<P><FONT face=隶书 color=#ff0000 size=6><B>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color=BLUE,strength=50); WIDTH: 100%; COLOR: #a572a2; 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></FONT></CENTER></B></FONT>
<P></P></MARQUEE></P>
二十三、带背景的移动文字

 

祝各位网友开心

代码
<P align=left><FONT color=#6911ee></FONT>&nbsp;</P>
<P align=center><FONT color=#6911ee></FONT>
<MARQUEE direction=up>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://cnpf2.dns165.com/bbs/upload/sf_20049199234.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=#cc00ff>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 40pt" face=华文琥珀 color=#336699>祝各位网友开心</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE></P>
二十四、在图片间穿梭的文字
朋 朋 友 友 您 您 好 好
代码
<P><STRONG></STRONG>
<CENTER>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文琥珀 color=#cf34f6 size=6>朋 朋</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://www.616bbs.com/picture/yn/tupian/shan.gif" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文琥珀 color=#ff0000 size=6>友 友</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://www.616bbs.com/picture/yn/tupian/shan.gif" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文琥珀 color=#0033cc size=6>您 您</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://www.616bbs.com/picture/yn/tupian/shan.gif" width=109> </STRONG>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文琥珀 color=#006633 size=6>好 好</FONT></B></MARQUEE><STRONG><IMG height=67 src="http://www.616bbs.com/picture/yn/tupian/shan.gif" width=109></STRONG></CENTER>
二十五、彩虹字体
很漂亮的特效字

你永远是雨韵的

代码

<P align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://www.3yz.net/tjxy/jiaocai/05.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="WIDTH: 593px; HEIGHT: 114px" align=center bgColor=#800080>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 56pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文琥珀 color=#336699><STRONG>你永远是雨韵的</STRONG></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

彩虹文字底色图案

　

数风流人物还看今朝
代码
<DIV align=center>
<DIV id=texture style="WIDTH: 560px; HEIGHT: 70px"><STRONG><IMG height=1 src="http://image12.360doc.com/DownloadImg/2010/06/2709/3771624_6.gif" width=372 align=right><IMG style="WIDTH: 557px; HEIGHT: 70px" height=70 src="http://image12.360doc.com/DownloadImg/2010/06/2709/3771624_1.gif" width=560 align=right> </STRONG>
<DIV align=center>
<DIV style="FONT-SIZE: 60px; FILTER: Chroma(color=#FCFBFA); FLOAT: left; WIDTH: 560px; HEIGHT: 70px; BACKGROUND-COLOR: #ffffff" align=center>
<DIV align=center><FONT color=#fcfbfa><STRONG>数风流人物还看今朝</STRONG></FONT></DIV></DIV></DIV></DIV></DIV>
 

滚动字幕

<marquee scrollAmount=2 width=300>愿这里成为你的心情驿站</marquee>

a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。

b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。

c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)

a)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代码是<marquee scrollAmount=2 width=300><a href=http://yuhuizi.2000y.net>凝眸网

站</a></marquee>，点击凝眸网站就可以进入了：

b)如何制作当鼠标停留在文字上，文字停止滚动？
代码如：
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如：
 文字内容

c)交替效果。代码如：
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
效果如：
 文字内容

 
  (灯下听雨 的分类目录 [网页技巧])
?
关闭
发表评论
发送评论时内容自动复制到剪切板
热点推荐

主题阅读
?
（本文为 360doc 用户收藏，不代表 360doc 观点）
360doc简介 服务条款 设360doc为首页 留言交流 联系我们 客服QQ:524562434
Copyright © 2010 360doc.com
360doc个人图书馆------您的知识管理平台