HTML语言学习笔记(一):文字特效处理

2014-8-23 / 0 评论 代码人生 / Mrxn

本文共计 21456 字,感谢您的耐心浏览与评论.

在学习HTML文字特效处理之前,应该先阅读:Html语言解析

对于不熟悉洋文的人来说,HTML确实难。但只要你有悟性、有恒心,静下心来慢慢学,对每个问题琢磨琢磨、捣鼓捣鼓,肯定能学会。 下面一步一步来:

        1、写字:点日志---写日志---全部功能---<>---进入HTML编辑状态。写你要展现的字,如:欢迎您光临Mrxn的博客!!

        2、确定字体: FONT表示文字的属性; face表示字体;即<FONT face=隶书> 欢迎您光临Mrxn的博客!!“=”号后填选择的字体,你想选什么字体,就填什么字体; 这个尖括号“<>”,是不能省掉的,而且代码必须写在这个尖括号之内。

       3、确定文字大小:  size表示字的大小,即:<FONT face=隶书 size=5> 欢迎您光临Mrxn的博客!!“5”是取的值,可以变化,数字越大字越大。

       4、确定文字颜色:color表示颜色;颜色的代码为:#  xxxxxx。   代码是:color=#ff0000 即:<FONT face=隶书color=#ff0000  size=5> 欢迎您光临Mrxn的博客!!

另外需熟记的几个颜色代码:红色:ff0000  绿色:00ff00  蓝色:0000ff    黑色:000000  白色:ffffff      要记住:颜色代码编入HTML语言中时可别忘了写“#”。

其它颜色代码请参看:颜色代码表

预览一下,看是不是红色:

                           欢迎您光临Mrxn的博客!!

5、文字加粗:好,红色字显示出来了,但有点瘦。在用WODE处理中文时我们用“B”可使文字丰满。试试:<FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B>  。再加上文字属性结束符号 </FONT > 就变为:<FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >       

        看看效果:

                       欢迎您光临Mrxn的博客!!

         6、移动文字:文字丰满了,如果能移动不更漂亮吗? 好办,就在所有代码的前面加一个移动代码<marquee>,  再在所有代码和文字的最后加一个移动代码</marquee> , 注意多了一个“/” 。即:<marquee> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>

         看看效果:

欢迎您光临Mrxn的博客!!

     注意两点;一是这个移动代码<marquee>默认向左移动;二是要点右上角“预览”才能动起来。

        移动 属性如下:
        direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

        向右移动<marquee direction= right> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客!!

         左右来回移动:<marquee behavior=alternate> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客!!
 

         向上移动<marquee direction= up> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客!!

 

         向下移动<marquee  direction= down> <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>

欢迎您光临Mrxn的博客!!

 

         上下来回移动<marquee   direction= down  behavior=alternate > <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>




欢迎您光临Mrxn的博客!!注意:使用“direction= up  behavior=alternate”也可得此效果。



 7、调整移动速度 代码是:scrollamount=1   “1”是可变值,数值越大越快。

 这个代码加在哪里?因为它是属于移动这一属性的,所以就要写在移动代码一起。即:<marquee direction= up  scrollamount=1 > <FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>         看看效果:

欢迎您光临Mrxn的博客!!

 

 

         8、调整文字位置:那就加一个表示位置的代码:

              <p align=center> 表示字体居中

              <p align=left>    表示字体居左

              <p align=right>   表示字体居右

即:<marquee direction= up  scrollamount=1 > <p align=center><FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >  </marquee>     

              注意:这一位置代码不能和FONT这一属性的写在一起,因为不是同一属性,只能另放在<FONT ...... </FONT > 这一属性的前面。

          看看效果吧!是不是居中了.?

欢迎您光临Mrxn的博客!!

 

 

         9、走走停停文字设置:

         基本语法:
         <marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

         即:   <marquee scrolldelay=500 scrollamount=100><FONT face=隶书 color=#ff0000  size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >   </marquee>    

         效果:

欢迎您光临Mrxn的博客!!

          10、跳跃式移动(即上下来回移动+左右来回移动): <MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<MARQUEE scrollAmount=2 behavior=alternate width=660><IMG src="http://xianyangygdz.blog.163.com/图片地址"><FONT face=楷体_gb2312 color=red size=6>插入文字</FONT></MARQUEE></MARQUE></MARQUEE>

        上下来回移动代码:<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
        左右来回移动代码:<MARQUEE scrollAmount=2 behavior=alternate width=660> 

       11、 上下两行文字相向移动:

<P align=center><FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE></P><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT></FONT></P>

       上行文字代码:<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE>

       下行文字代码:<FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT>

       提醒:在用这种效果时,文字移动范围的宽width的取值很重要,两段文字移动范转的width取值和一定要小于背景层width的取值。

 效果如下:

欢迎您光临Mrxn的博客!!

!!客博的nxrM临光您迎欢

      12、由中间向两边移动文字:在上例"11"中取掉上下行中间的</P>”,就可变为在同一水平线上由中间向两边移动的文字。为了美观,再在文字前加个图片,即为:<P align=center><FONT face=隶书 color=#ff0000 size=5>
<MARQUEE width=350 height=50><IMG src="图片地址">欢迎您光临Mrxn的博客!!</MARQUEE></FONT></MARQUEE></MARQUEE><FONT face=隶书 color=#c000c0 size=5><MARQUEE direction=right width=350 height=50>!!客博的虎老临光您迎欢<IMG src="图片地址"></MARQUEE></FONT></FONT></P>

效果漂亮吧?

学习HTML语言笔记(一):文字特效处理 - 老虎 - 强大才能生存欢迎您光临老虎的博客!!  !!客博的虎老临光您迎欢学习HTML语言笔记(一):文字特效处理 - 老虎 - 强大才能生存

       由两边向中间移动文字

<P align=center><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE direction=right width=280 height=50>!!客博的nxrM临光您迎欢<IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/joeubzjS_MRGXKeH6hAGog==/2010857233621410887.jpg" bbimg(this)?></MARQUEE></FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE width=280 height=50><IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/wpc64e02arvSPnFzjjAXuA==/5397564153404060463.jpg" bbimg(this)?>欢迎您光临Mrxn的博客!!</MARQUEE></FONT></MARQUEE></P>

      13、原地跳动文字基本语法:

 <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>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>字</B></CENTER></MARQUEE></FONT></CENTER>

  
  
  
  

         14、交替跳跃文字基本语法

 <DIV></DIV>
<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>
<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></FONT></CENTER>

  
  
  



  15、右向左上下起伏飞翔基本语法:

<MARQUEE>
<MARQUEE direction=up behavior=alternate height=150><IMG src="图片地址" rel="external nofollow" rel="external nofollow" ><IMG src="图片地址" rel="external nofollow" rel="external nofollow" ><FONT face=华文行楷 color=#0000ff size=5>填写文字</B></FONT></MARQUEE></MARQUEE>

       右向左上下起伏飞翔,height=100 是上下起伏飞翔幅度,可以调整,区分图片大小,一般设置在50至150的范围内比较好
16、左向右上下起伏飞翔文字基本语法:

        <marquee direction=right><marquee behavior=alternate direction=up height=200><font color=0000ff size=4 face=华文行楷><b>!去回快</b></font><br><img src=图片地址><img src=图片地址><img src=图片地址></marquee><br></marquee>

      左向右上下起伏飞翔, height=200 是上下起伏飞翔幅度,可以调整,区分图片大小,一般设置在50至150的范围内比较好。
17、原地跳高跳低基本语法:

 <CENTER><FONT face=隶书 color=red size=25>
<MARQUEE direction=up behavior=alternate width=60 height=120>虚</MARQUEE>

<FONT color=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=80>拟</MARQUEE>

<FONT color=brown>
<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE>

<FONT color=green>
<MARQUEE direction=up behavior=alternate width=60 height=80>您</MARQUEE>

<FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=120>永</MARQUEE>

<FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=80>远</MARQUEE>

<FONT color=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=120>幸</MARQUEE>

<FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=80>福</MARQUEE>

</FONT></B></MARQUEE></FONT></CENTER></FONT



 18、设置大字体的文字:

       (1)、基本语法:
       <font style=font:30pt face=新宋体 color=#ff0000>插入文字</font>

       (2)、属性如下:
       font:30pt 数值越大文字就越大

      (3)、效果:

  相逢是缘 相思是福

19、彩色字体基本语法:

        <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=#AO00ff> 斑</FONT><FONT color=#ff00ff>斓</FONT></FONT></FONT></STRONG></P>

        代码说明:<strong>是用作重点强调的,其文本通常以粗体显示。

看看效果吧!

         20、文字阴影、投影效果
 (1)、文字阴影效果:

<DIV align=center>
<DIV style="FONT-SIZE: 35pt; FILTER: shadow(color=阴影颜色代码,direction=阴影方向); WIDTH: 400px; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体; HEIGHT: 51px">
<DIV align=center><B>文字内容</B></DIV></DIV></DIV> 

         说明:FILTER: shadow滤镜效果是沿对象边缘产生阴影。

文字阴影效果

          抛射字体基本语法:

<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>

看看效果吧!

Mrxn欢迎您


(2)、文字定点投影效果:

<TABLE style="FILTER: dropshadow(color=阴影颜色代码,offx=3,offy=3,positive=true)" align=center><FONT face=字体 color=文字颜色代码 size=字号><B>文字内容</B></FONT> 
<TBODY></TBODY></TABLE> 

         说明: FILTER: dropshadow滤镜可使对象在指定的方向和位置上产生阴影。阴影相对于对象的位置可通过offx和offy来设定。

文字定点投影效果

           文字浮雕效果:

<TABLE style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1)" align=center><FONT face=隶书 color=#ffffff size=7>文字浮雕效果</FONT> 
<TBODY></TBODY></TABLE>

文字浮雕效果

(3)、投影字体效果:

 <DIV align=center>
<DIV style="FONT-WEIGHT: bolder; FONT-SIZE: 40px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px" align=center><Font color=文字颜色代码 face=字体>
<DIV align=center><B>文字内容</B></DIV></Font></DIV></DIV>

         说明:FILTER: blur滤镜可使对象在指定的方向和位置上产生动感模糊效果。font-weight为文字浓淡粗细属性,可用normal、bold、bolder、light、lighter及数值100-900来表示。

投影字体效果

          文字模糊效果

 <TABLE style="FILTER: blur(add=true,direction=135,strength=30)" align=center><FONT face=黑体 color=#ee00ee size=6><B>文字模糊效果</B></FONT> 
<TBODY></TBODY></TABLE>

文字模糊效果

立体镂空字基本语法:

<DIV style="FILTER: shadow(color=#ff4400, strength=40); WIDTH: 708px; HEIGHT: 483px"><FONT size=3><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000>虚拟</FONT><BR></FONT></DIV>

虚拟欢迎您!
21、日志美术字:

(1)、<DIV style="FILTER: shadow(color=dcdcdc); COLOR: black; HEIGHT: 5px">日志美术字</FONT></DIV>

日志美术字

(2)、<DIV style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><PRE> <FONT face=黑体 color=deeppink size=4><B>日志美术字</B> </FONT></PRE></DIV>

 日志美术字 

 (3)、<DIV style="FONT-WEIGHT: bold; FONT-SIZE: 16pt; FILTER: Shadow(Color=#dcc4c4,Direction=135); WIDTH: 131px; COLOR: #0000cd; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 40px; writing: tb-rl">日志美术字</DIV>

日志美术字

 (4)、<DIV style="FILTER: shadow(color=deeppink); HEIGHT: 5px"><SPAN style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><FONT face=幼圆 color=#000000 size=5><B>日志美术字</B> </FONT></DIV></SPAN>

日志美术字

(5)、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=black,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV> </DIV>

日志美术字

 (6)、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=3399ff,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV>

日志美术字

 (7)、<DIV style="FILTER: glow(color=9400de); COLOR: #ffffff; HEIGHT: 14px">日志美术字 </DIV>

日志美术字

 (8)、<DIV style="FONT-SIZE: 12pt; FILTER: Glow(color=006363,

strength:2); WIDTH: 100%; COLOR: #ffffe6; FONT-FAMILY: 黑体; HEIGHT: 20px">日志美术字</DIV>

日志美术字

(9)、<DIV style="FONT-SIZE: 14pt; FILTER: glow (color=blue,strength:2); WIDTH: 100%; COLOR: #ff0000; HEIGHT: 20px; valign: bottom"><STRONG><BIG>日志美术字</BIG></STRONG></DIV>

日志美术字
           22、带背景色文字效果:

<DIV align=center>
<DIV style="FONT-SIZE: 27pt; FONT-FAMILY: 字体; WIDTH: 背景宽度; BACKGROUND-COLOR: 背景颜色代码">文字内容</DIV></DIV>

          说明:font-family为字体属性,font-size为文字大小属性。

加上背景色效果

         23、文字反转效果:

  (1)、左右反转效果:

<TABLE style="FILTER: FlipH" align=center>

<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

         说明:FILTER: FlipH表示沿水平方向翻转对象的滤镜效果。

文字左右反转

(2)、上下反转效果:

<TABLE style="FILTER: FlipV" align=center>

<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

          说明:FILTER: FlipV表示沿垂直方向翻转对象的滤镜效果。
 

文字上下反转

     (3、)倒影字效果:

<DIV align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B></FONT></DIV>
<TABLE style="FILTER: FlipV; LINE-HEIGHT: 100%" align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B> </FONT>
<TBODY></TBODY></TABLE>

倒影代码
倒影代码

 

 <DIV style="FONT-SIZE: 35pt; WIDTH: 100%; COLOR: green;

FONT-FAMILY: 华文新魏" align=center>

<B><EM>老虎的倒影代码</EM></B></DIV>
<DIV style="FONT-SIZE: 35pt; FILTER: FlipV; WIDTH: 100%; COLOR: blue; FONT-FAMILY: 华文新魏" align=center>

<B><EM>老虎的倒影代码</EM></B></DIV>

Mrxn的倒影代码
虚拟的倒影代码

 24、空心字效果:

<TABLE style="FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033)"

align=center><FONT face=字体 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>  

         说明:空心字是用滤镜glow、mask、chroma组合,mask和chroma的颜色要相同,这个颜色决定了字体的颜色。

空心字效果

          25、阴、阳文字效果:

  (1)、阴文字效果:

<TABLE style="FILTER: mask(color=文字颜色代码) shadow(color=阴影颜色代码,direction=135) chroma(color=文字颜色代码)" align=center><FONT face=字体 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE>

        说明:阴文字是用滤镜mask,shadow,chroma组合。字体的颜色由shadow决定,mask和chroma的颜色要相同,色彩任意。

阴文字效果

(2)、阳文字效果:

<TABLE style="FILTER: mask(color=#a09261) dropshadow(color=#000000,offx=-3,offy=-3,positive=1) chroma(color=#a09261)" align=center><FONT face=字体 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE>

        说明:阳文字是用滤镜mask,dropshadow,chroma组合。mask和chroma的颜色相同,色彩由dropshadow决定。

阳文字效果

         26、齿边字效果;

<TABLE style="FILTER: glow(strength=30) mask(color=blue)" align=center><FONT face=字体 size=字号>文字内容</FONT> <TBODY></TBODY></TABLE>

         说明:齿边字是用滤镜glow,mask组合,mask的颜色决定字体的颜色。

齿边字效果

           27、文字光晕效果:

<DIV style="FONT-SIZE: 35pt; FILTER: glow(color=光晕颜色代码,strength=5); WIDTH: 100%; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体" align=center>
<DIV align=center><B>文字内容</B></DIV></DIV>

           说明:strength表示光晕强度

文字光晕效果

          28、文字透明、渐变效果:

 (1)、文字透明效果:

<TABLE style="FILTER: alpha(opacity=10,finishopacity=20,sytle=2,startx=1,starty=1,finishx=100,finishy=100)" align=center><FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT> 
<TBODY></TBODY></TABLE> 

       说明:opacity:表示文字起始透明度,有效范围是0-100;100是完全不透明,0是完全透明。
        finishOpacity:表示文字结束透明度,有效范围是0-100;100是完全不透明,0是完全透明。
        style:表示文字滤镜样式,可更改等号后面参数:0-平均透明;1-线状渐变透明;2-圆形渐变透明;3-菱形(X形)渐变透明。
        startx、startx、finishx、finishy分别表示文字滤镜效果的起始和结束位置。

文字透明效果

    (2)、文字渐变效果:

<DIV style="FONT-SIZE: 35pt; FILTER: alpha(opacity=100,style=1); WIDTH: 100%; COLOR: 字体颜色代码; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center>文字内容</DIV> 

          说明:LINE-HEIGHT: 为行间距。

渐变效果变变!变!变!

           29、文字波纹效果:

  (1)、文字波浪效果:

<DIV style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center><B>文字内容</B> </DIV>

        说明:add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之;freq属性:决定显示的频率,即应出现多少个波形;phrase属性:决定波形的形状,值取0至360之间;strength属性:决定波形的振幅(扭曲强度)。

欢迎您光临Mrxn的博客

 (2)、文字扭曲效果:

代码格式:与文字波浪效果的性质相同,均为同一种滤镜效果,只是参数设置不同罢了。

 <DIV align=center><DIV style="FONT-SIZE: 35pt; FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0); WIDTH: 300px; LINE-HEIGHT: 15pt; FONT-FAMILY: Verdana; HEIGHT: 20px" align=center><FONT face=华文行楷 color=#ff0033><STRONG><B>扭曲文字效果</B></STRONG></FONT></DIV></DIV>

扭曲文字效果

            30、彩光闪动文字的基本语法:

 <TABLE align=center background=http://img.blog.163.com/photo/eHaHkYknewet3nHzUNS3RQ==/3702803318628988464.jpg border=5>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#000000)" align=middle><FONT style="FONT-SIZE: 50pt" face=隶书 color=#336699><B>老虎欢迎您的光临</B></FONT></TD></TR></TBODY></TABLE>

虚拟欢迎您的光临

 

                   再作个火焰燃烧效果:

虚拟欢迎您的光临

 

      

虚拟欢迎您!

 

 <TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3>
<TBODY>
<TR>
<TD background=http://img.blog.163.com/photo/PFDxwoiNrj8piPXB9KhTiQ==/3702803318628988463.jpg>
<P align=center>
<MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"><FONT color=#ff0000 size=6><B>虚拟欢迎您!</B><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

带背景的闪光字体

 (带背景的闪光字体)

<TABLE cellSpacing=0 cellPadding=0 align=center background=文字内闪光图片地址>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=文字的背景图片地址>
<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><B>带背景的闪光字体</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 

        说明:实际上是使用了两层表格达到的效果。font-style为字体风格属性,font-variant为字体变量属性(这个属性有两个值,normal和small-caps,normal是缺省值);font-weight为文字浓淡粗细属性。

   31、文字在图片上向上移动的基本语法 :

<DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 24px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" auto?>
<P align=center><BR>
<TABLE height=390 cellSpacing=0 cellPadding=0 width=550 align=center background=http://img.blog.163.com/photo/ADCF8YQn4AeGVOsgxhfg6g==/879609302221279143.jpg border=3>
<TBODY>
<TR>
<TD>
<P align=center>
<MARQUEE scrollAmount=3 direction=up>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>朋友您好!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>亲自动手!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>体验成功!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>其乐无穷!</FONT></P></MARQUEE></P></TD></TR></TBODY></TABLE></P></DIV>


朋友您好!

亲自动手!

体验成功!

其乐无穷!

         32、竖排渐出字基本语法:


<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=550 height=293>
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=550 height=290>
<P align=left><FONT style="FONT-SIZE: 18pt; FILTER: WIDTH: 100%; COLOR: #ea0000; 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></FONT></P></MARQUEE></MARQUEE></DIV>

                                                                  看看添加背景后的效果:

我带着远古的心愿
你怀揣前世的祈盼
我饱含如许的虔诚
你浸润最深的期待
我们跨越万水千山
赴今世的约定...
你感觉我深情凝眸的甜柔
我倾听你心室澎湃的跳动
白云轻盈飘荡
星月神秘闪烁

燃烧的篝火旁
我们席地而坐
倾诉不尽的相思
燃烧的火焰是不灭的炙热
让我们一起出发
背上快乐的行囊
携着一路的欢唱
踏着灿烂的芬芳
望--天上云卷霞飞
看--地下小桥流水
拥--郁郁山川入怀
枕--簇簇波浪入眠
把--忧烦抛在身后
让--愉悦洒满诗行 

 

        方法是:将第32例的所有代码嵌入下面的代码中,然后在“背景图片地址”处换上你所喜欢的图片地址,调整一下图片的宽度和高度,合适为止。

<DIV></DIV>
<TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
           <TBODY>
           <TR>
           <TD background=背景图片地址>
第32例的所有代码</TD></TR></TBODY></TABLE> 

  33、让文字在背景图片上悠闲地飘飞 :

<DIV></DIV>
<TABLE borderColor=#a000ff height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=图片地址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=450>
<P align=center><FONT face=隶书 color=#ff0000 size=6 ff><B>写文字 </B></FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>

 说明:

                 A、图片地址自己输入;

                 B、文字、字体和颜色可以变动。

学海无涯苦作舟




标签: html 文字特效

转载:转载请注明原文链接 - HTML语言学习笔记(一):文字特效处理


0条回应:“HTML语言学习笔记(一):文字特效处理”


发表评论

{view_code_no}