特效字体 - 紫贝壳教学

lctse 2011-02-14

展开全文

发表日期：2010年8月29日

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

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

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

代码

二、阴影字体

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

代码

<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>日出江花红胜火春来江水绿如蓝</P></FONT>

三、圈边字体

紫贝壳网站

代码

<P align=center> </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> </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> </P>

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

千里有缘是朋友

代码

<P align=center><BR>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://616bbs./picture/yn/hexiang/st4.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=http://616bbs./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="; 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="; 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><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> </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./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./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> </P>
<P align=center>
<TABLE class=tablebody2 style="; 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> </P>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<DIV align=center>
<MARQUEE scrollAmount=3 behavior=altrnate width=460 <IMG src="http://www./bbs/UploadFile/2003-9/20039251018214901.gif">
<DIV align=center><FONT face=隶书 color=red size=7>愿你的人生绚丽</FONT></DIV></MARQUEE></DIV></MARQUE></MARQUEE>

十五、左右运动的文字

相思红豆

代码

十六、双排向下运动的文字

去年今日此门中 人面桃花相映红

代码

<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=left><FONT color=#6911ee></FONT> </P>
<P align=center><FONT color=#6911ee></FONT>
<MARQUEE direction=up>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://cnpf2./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 align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://www./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://image23.360doc.com/DownloadImg/2011/02/1421/9169874_7.gif" width=372 align=right><IMG style="WIDTH: 557px; HEIGHT: 70px" height=70 src="http://image23.360doc.com/DownloadImg/2011/02/1421/9169874_2.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.>凝眸网

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

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

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

贝壳音画欢迎您