设为首页收藏本站
鲜花(7) 鸡蛋(0)
发表于 2009-8-11 21:46 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
本帖最后由 心诉 于 2009-9-5 01:22 编辑

简单框架音画HTML代码学习(一)


前言:
一幅图画加上一段文字或一首诗词或一篇文章,配上音乐(或加上特效)就组成了音画。音画让人从音乐、图片中感受到文章或图片中反映出来的作者的情感,给人以美的享受或让人受到情感的熏陶。由于HTML代码的使用,音画制作变得越来越简单,本人也是音画制作的初学者,从网上搜集了一些音画制作的资料,并结合自己的学习体会,加以整理,力求深入浅出,使初学HTML代码的朋友能够尽快入门,也欢迎音画制作爱好者交流自己的制作体会,这个系列讲座就算是抛砖引玉吧。

一、初学HTML制作音画,大都会对HTML代码犯晕,这里从最简单的一组框架音画代码开始,音画制作的三个基本要素是:图片、文字资料、音乐,只要在代码模板中相应插入这些基本要素,就可以做出简洁而漂亮的音画。

二、不懂HTML代码不要紧,初学者只要把自己的图片、文字资料、音乐地址替换代码模板中的相应项目就可以,只是注意代码中的空格或字母要规范,不产生乱码就能顺利完成制作。

三、最简单框架音画代码模板如下:

<table align=center
width=主图片宽度 border=8 bordercolor=000000 background=背景图片地址>
<tr>
<td>
<center><img src=主图片地址></center> </td></tr>
<tr>
<td>
<font color=ffffff>文字及(或)其他资料</font> </td></tr>
<tr>
<td>
<center><EMBED style="FILTER: xray()" src=音乐地址 width=450 height=65 ShowStatusBar="1" type=audio/mpeg volume="0" autostart="true" loop="true"> </center>
</td></tr></table><br><br><br><br><br><br>

四、制作过程说明:

1、边框的宽度和颜色:第一行代码中的border=8 ,数字8表示边框宽度,一般取值5--15,接着的bordercolor=000000,数字000000是指边框的颜色,也可以用英文表示,blue是表示颜色是绿色,red是红色,
也可以在色码表网页里选,如:数字000000是黑色,数字800000是暗褐色,这里选000000(即黑色)。

2、背景图片(框架内的背景),


                               
登录/注册后可看大图



3、图片地址(主图片),宽度是450

                               
登录/注册后可看大图



4、文字及(或)其他资料:
满江红 问苍穹
作者:理想紫竹林

怒问苍穹,
何无道,
毁我巴蜀,
顷刻里,
生灵涂炭,
万人亡故。
老母墟前悲幼子,
孤女垣后寻慈父。
更滔滔大雨落危城,
惨难睹。

天地恸,
江河哭。
一方难,
八方赴。
有人间真爱,
万民相助。
四海同哀旗半降,
九洲共悼头低俯。
我炎黄浴火再重生,
铮铮骨。

文字的颜色选用白色(代码是ffffff)

5、音乐地址:
http://www.qiuwt.com/attachment.php?aid=35420&noupdate=yes

6、注意事项:在上述代码中,<table对应有</table>结尾,<tr>对应有</tr>结尾,<td>对应有</td>结尾,这是框架代码中成双成对出现的,不能多也不能少,否则就会出现乱码。另外,<center>有(对中摆放代码)</center>结尾,<p>(分段落代码)有</p>结尾。
特别提醒:凡是代码帖子,养成在帖子结尾打上6个以上回车代码<br>的习惯。

五、把以上的内容填入上面代码模板相应位置,
代码如下:
<table align=center width=450 border=8 bordercolor=000000 background=

                               
登录/注册后可看大图
>
<tr>
<td>
<center><img src=http://p.thec.cn/liuxj/0805/a8.jpg></center> </td></tr>
<tr>
<td><br>
<font color=ffffff>满江红 问苍穹<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> </td></tr>
<tr>
<td>
<center><EMBED style="FILTER: xray()" src=http://www.qiuwt.com/attachment.php?aid=35420&noupdate=yes width=450 height=65 ShowStatusBar="1" type=audio/mpeg volume="0" autostart="true" loop="true"> </center></td></tr></table><br><br><br><br><br><br>


[发帖际遇]: 心诉开车超速被罚款金钱163元.


[发帖际遇]: 心诉开车超速被罚款金钱163元.


[发帖际遇]: 心诉开车超速被罚款金钱163元.
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 21:47 | 显示全部楼层
效果显示如下:


满江红 问苍穹
作者:理想紫竹林

怒问苍穹,
何无道,
毁我巴蜀,
顷刻里,
生灵涂炭,
万人亡故。
老母墟前悲幼子,
孤女垣后寻慈父。
更滔滔大雨落危城,
惨难睹。

天地恸,
江河哭。
一方难,
八方赴。
有人间真爱,
万民相助。
四海同哀旗半降,
九洲共悼头低俯。
我炎黄浴火再重生,
铮铮骨。



是不是很简单,利用模板可以做出很多音画帖子,首先了解和学习音画制作的一些基本知识,边制作边体会,就是这个简单的框架也可以加入更多图片、FLASH、变换播放器形状及颜色。

欢迎大家跟帖练习和交流。

[发帖际遇]: 心诉参加慈善晚会, 捐款金钱261元.
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 21:50 | 显示全部楼层


【代码应用】竖排文字从右边逐行显示到左边,再整体往右移动效果


      效果

高山流水



一座山,一江水。

席地而坐,两手随意一划,

青山拥着抚琴人躲开红尘,

躲开喧杂,开始吟唱。



记忆还旋转在浮躁之中,

潺潺流水已开始清澈的舔舐耳膜。

宁静淡泊,儒雅至极。



飘逸的弹者在水中温柔着灵巧的十指,

七根心弦有节奏地和着绿水歌唱。

唱出一种幽娴的神韵一种恬淡的灵性。



仁者乐山,智者乐水。

所谓知音,便是两人的心灵相通,

轻轻一点,就会产生美妙的共振。



孤傲洒脱,双目微闭。

奏者将听者弥漫在小桥流水的原始画卷里。

怎样的心绪,就会奏响怎样的音乐。



双脚穿行在秀山丽水之间,久久不愿上岸。

心灵却穿过时光隧道,寻访知音的足迹。

鱼需要水,鸟需要巢,人需要知音。



知音犹如鹰之两翼,折断一翅,

鹰将永远不能搏击长空。

知音已死,心事赋琴,弦有谁听?



琴碎。音绝。

满腔热血,仰天一喷,

鲜血吮吸着残琴断弦。千万颗心在颤抖。

乐为知己者奏。知己已去,留琴何用?



青山依旧,绿水依旧。

千古名曲还会响起。

可是,谁能诠释【知音】二字呢?


----文:踏碎红尘



      代码

<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide width=600 height=400>
<MARQUEE style="LINE-HEIGHT: 100%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=600 height=400>
<DIV style="FONT-SIZE: 12pt; WIDTH: 100%; COLOR: black; LINE-HEIGHT: 80%; FONT-FAMILY: 新宋体">
<DIV align=left>
高山流水 <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>
唱出一种幽娴的神韵一种恬淡的灵性。 <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><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><BR>----文:踏碎红尘 <BR><BR>
</DIV></DIV></MARQUEE></MARQUEE><br><br>

附:移动文字基本语法和属性
基本语法:
<marquee>需要移动的文字</marquee>

移动参数的属性:
  1.direction=# 方向 #=left, right ,up,down(分别表示左、右、上、下)
例:direction=left 表示从右向左移动
direction=right 表示从左向右移动
direction=up 表示文字自下向上移
  2.bihavior=# 次数 #=scroll, slide, alternate
例:behavior=scroll 表示一次一次的循环移动
behavior=slide 表示只移动一次就停
behavior=alternate 表示来回移动(从左到右,又从右到左)
  3.loop=# 循环 #=次数,若未指定,则循环不止(infinite)
例:loop=3 表示只走 3 次
loop=infinite 表示一直循环下去
  4.scrollamount=# 速度加快(数值),可用:1、2、3。。。1最慢,数字越大越快
  5.scrolldelay=# 速度减慢(数值), 可用:100、200、300、、500。。。
  6.bgcolor=# 背景色
例:#=ff00ff ,或者是下列预定义色彩(英文):
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
例:bgcolor=red 是红色的背景色
  7.height=# width=# 文字组的范围(宽度和高度的数值)
[发帖际遇]: 心诉坐公车的时候被小贼偷了一部NOKIA手机, 损失金钱100元.
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 22:00 | 显示全部楼层
本帖最后由 心诉 于 2009-8-11 22:01 编辑

很多朋友都可能遇上这样的问题,
当你想要把文字或背景色换一个时,
却一时想不起来自己想要颜色的代码,
这里为了大家方便查找,
以下这个地址打开就能查到你所想要的颜色代码。

网页编辑颜色的地址

http://www.lxsc.net/index.asp?xAction=xReadNews&NewsID=3668

[发帖际遇]: 心诉获得本周补贴金钱371元.
鲜花(0) 鸡蛋(0)
发表于 2009-8-11 22:03 | 显示全部楼层
很好,很好,这样与便初学者学习.感谢宝贝想得周到.
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 22:03 | 显示全部楼层

常用字体

<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>常用字体</B></FONT>  

 

*朋友别哭*

<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 70px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#3333cc>朋友别哭</FONT></CAPTION> <BR></CAPTION></P>

 

总有一天等到你!

<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 50px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 500px; POSITION: relative">
<P><FONT color=#ff00ff>总有一天等到你! </FONT></P></FONT></CAPTION>
<DIV></DIV><BR><BR><BR>

 

华文行楷!

</B><BR></B><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>华文行楷!</FONT>
<DIV></DIV><BR><BR></DIV>

 

大家好!

<CENTER><FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>
<P>大家好!</P></B></FONT></CENTER></DIV>

 

一 杯 热 茶~*

<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>一杯热茶~*</B></FONT></CENTER></DIV>

 

一声问候...

<FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>一声问候...</B></FONT></DIV>

 

的家

<FONT size=7><FONT color=#ff0000>这</FONT><FONT color=#d52a00>里</FONT><FONT color=#ab5400>是</FONT><FONT color=#817e00>你</FONT><FONT color=#57a800>我</FONT><FONT color=#2dd200>的家</FONT></FONT>

 

别忘了,*.*@







<FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 70px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#3333cc>别忘了,,,,</FONT></CAPTION> <BR></CAPTION></P><BR></DIV>

 


有空来坐坐*,,

<DIV style="FILTER: shadow(color=#6495ED, strength=60); WIDTH: 480px"><FONT face=华文彩云 color=#9932cc size=7><B>
<CENTER><BR>有空来坐坐*,,</CENTER>
<CENTER></B>&nbsp;</CENTER></FONT></DIV></DIV>

 

朋友,欢迎您的到来~*.~.

朋友,欢迎您的到来~*.~.

<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE></CENTER></DIV>
<P></P></CENTER>

 

圈边的字

<CENTER>
<DIV style="FONT-SIZE: 52pt; FILTER: glow(color=ffff00, strength=5); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">圈边的字</DIV></CENTER><BR></DIV>

 

HTML标签!







<FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=red); WIDTH: 100%; COLOR: green; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>HTML标签!</B></FONT><BR></DIV>

 

 暗香阁

 暗香阁

<MARQUEE width=250 height=50><IMG src="http://www.dabaoku.com/gif/154/gif034.gif"><FONT face=隶书 color=#ff0000 size=7> 暗香阁<IMG src="http://www.dabaoku.com/gif/154/gif034.gif"></FONT></MARQUEE></FONT>
<MARQUEE direction=right width=250 height=50><IMG src="http://www.dabaoku.com/gif/154/gif033.gif"><FONT face=隶书 color=#ff0000 size=7> 暗香阁<IMG src="http://www.dabaoku.com/gif/154/gif033.gif"></FONT></MARQUEE></FONT></DIV>

 

*暗香阁*

<MARQUEE direction=up>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://xz7.2000y.net/admin/uploadfile/20044119194846010.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=lime>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷 color=#336699>暗香阁、</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE></DIV>

 

柳儿

<DIV align=center>
<DIV style="FILTER: shadow(color=#c299ff, strength=40); WIDTH: 480px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>柳</FONT> <BR></DIV></DIV></DIV>

注:(所有代码的字体,色彩,大小,背景等可在DESIGN状态下修改复制)

1 代码及效果如下:

<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>常用字体</B></FONT>

常用字体




2 代码及效果如下:

<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 70px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#3333cc>朋友别哭</FONT></CAPTION> <BR></CAPTION></P>
朋友别哭
3.代码及效果如下:
</B><BR></B><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>华文行楷!</FONT>
<DIV></DIV><BR><BR></DIV>

华文行楷!






4.代码及效果如下:

<CENTER><FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>
<P>大家好!</P></B></FONT></CENTER></DIV>








 

大家好!

6.代码及效果如下:
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>玲珑草屋</B></FONT></CENTER></DIV>

玲珑草屋

7.代码及效果如下:

<FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>一声问候...</B></FONT></DIV>

一声问候...

8/代码及效果如下:

<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=240>欢迎你朋友</FONT></MARQUEE><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=240>友朋你迎欢</MARQUEE></FONT></FONT>

开开心心 心心开开

9.代码及效果如下:
<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>朋友,欢迎您的到来~~~~</FONT></CENTER></B></MARQUEE></CENTER></DIV>
<P></P></CENTER>
朋友,欢迎您的到来~~~~
朋友,欢迎您的到来~~~~

10.代码及效果如下:
<DIV style="COLOR: red; FILTER: glow(color=ffff00, strength=5); FONT-FAMILY: Arial; FONT-SIZE: 52pt; POSITION: relative; WIDTH: 350px"><FONT size=5>圈边的字,不要太大</FONT></DIV>
<CENTER></CENTER>
圈边的字,不要太大

11.代码及效果如下:

<CENTER></CENTER><FONT color=#e61ae6 face=楷体_GB2312 size=7 style="COLOR: green; FILTER: shadow(color=red); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; HEIGHT: 60px; LINE-HEIGHT: 150%; WIDTH: 408px">红红火火</FONT><BR>
<DIV></DIV>
红红火火

12.代码及效果如下:

<CENTER></CENTER>
<P></FONT></FONT></FONT></P>
<DIV></DIV></FONT></FONT>
<DIV><FONT color=#86f93a><BR></FONT>&nbsp;</DIV>
<MARQUEE height=50 width=250><FONT color=#ff0000 face=隶书 size=7>开开心心做帖帖</FONT></MARQUEE></FONT>
<MARQUEE direction=right height=50 width=250><FONT color=#ff0000 face=隶书 size=7>开开心心做帖帖</FONT></MARQUEE></FONT>
<DIV></DIV>

开开心心做帖帖 开开心心做帖帖

13.效果及代码如下:

但愿人长久

14.效果及代码如下:

<BR>&nbsp;</P>
<MARQUEE direction=up height=40 scrollAmount=3 scrollDelay=150 width=400>
<CENTER><FONT color=#ffaa00 face=黑体 size=5><FONT color=#ffaa00>如果你听见风中有些动静,</FONT></FONT></CENTER>
<CENTER><FONT color=#ffaa00 face=黑体 size=5><FONT color=#ffaa00>可能是我在想你...</FONT></FONT></CENTER>
<CENTER><FONT color=#ffaa00 face=黑体 size=5><FONT color=#ffaa00>如果你发现梦中有些迷语,</FONT></FONT></CENTER>
<CENTER><FONT color=#ffaa00 face=黑体 size=5><FONT color=#ffaa00>就是我在呼唤你...</CENTER></FONT></FONT></MARQUEE>
<P>&nbsp;</P>




如果你听见风中有些动静,
可能是我在想你...
如果你发现梦中有些迷语,
就是我在呼唤你...

16.效果及代码如下:

</P>
<P>&nbsp;</P>
<MARQUEE direction=down height=50 width=480><IMG src="http://www.dabaoku.com/gif/154/gif040.gif"><FONT color=#ff0000 face=隶书 size=7>祝朋友们幸福一生&nbsp;<IMG src="http://www.dabaoku.com/gif/154/gif040.gif"></FONT></MARQUEE>

祝朋友们幸福一生

17.代码及效果如下:

<DIV style="FILTER: shadow(color=#6495ED, strength=60); WIDTH: 480px"><FONT face=华文彩云 color=#9932cc size=7><B>
<CENTER><BR>
和你在一起</B></CENTER></FONT>
<P></P></DIV>







 


和你在一起

18.代码及效果如下:

<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>和你在一起</B></FONT>

注:

opacity属性:设置透明度,取值0至100之间的任意数值,100表示完全不透明;
style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。

而width:100%则表示参与渐变的对象的宽度,通常都设置为100%

和你在一起



19:代码及效果如下:

<FONT style="FONT-SIZE:30pt;filter:blur(add=1,direction=30,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>大臭臭</B></FONT>

注:ADD属性在运动模糊中,其值为0和1,0表示“否”,用于文字,1表示“是”,用于图像;Direction属性是模糊移动的角度,其值为0至360度;Strength属性是模糊移动的距离

大臭臭



20.代码及效果如下:

<FONT style="FONT-SIZE:30pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>要有你</B></FONT>

注:

color属性:阴影颜色;
direction属性:阴影角度,值取0至360度。

只要有你



21.代码及效果如下:

<FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>路上有你苦一点也愿意</B></FONT>

一路上有你苦一点也愿意

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

22.代码及效果如下:

<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>路上有你</B></FONT>

注:color属性:光晕颜色;strength:光晕的厚度。

一路上有你



23:效果及代码如下:

<CENTER><FONT face=隶书 color=red size=15>
<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=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=80>愉</MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=120>快</MARQUEE></FONT></B></MARQUEE></FONT></CENTER></FONT></FONT></FONT></FONT></FONT></FONT>



24.代码及效果如下:



<MARQUEE scrollAmount=8 direction=right behavior=alternate><B><FONT color=#7700bb size=5><FONT color=lime>
<MARQUEE direction=up behavior=alternate width=40 height=200 align="middle">明</MARQUEE><FONT color=red>
<MARQUEE direction=up behavior=alternate width=40 height=150>天</MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=40 height=200>更</MARQUEE><FONT color=fuchsia>
<MARQUEE direction=up behavior=alternate width=40 height=150>美</MARQUEE><FONT color=olive>
<MARQUEE direction=up behavior=alternate width=40 height=200>好</MARQUEE><FONT color=green>
<MARQUEE direction=up behavior=alternate width=40 height=150>呵</MARQUEE><FONT color=red>
<MARQUEE direction=up behavior=alternate width=40 height=200>呵</MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=40 height=150>!</MARQUEE><FONT color=orange></FONT></B></MARQUEE>

25.代码及效果如下:

<DIV align=center>
<DIV style="FILTER: shadow(color=#c299ff, strength=40); WIDTH: 480px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>娇娇</FONT> <BR></DIV></DIV></DIV>

娇娇
26:代码及效果如下:

<TABLE cellSpacing=0 cellPadding=0 align=center background=http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0024.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=#000000>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 30pt" face=华文行楷 color=#336699><B>祝学业有成,万事如意!</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

祝学业有成,万事如意!

27.效果及代码如下:

<TABLE class=tablebody2 style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 12pt; LINE-HEIGHT: 18pt" width="100%">&nbsp;<B></B><BR>
<TABLE borderColor=#cd5c5c width=315 align=center border=3>
<TBODY>
<TR>
<TD background=http://img1.qq.com/news/20040719/480273.jpg>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=500>
<MARQUEE scrollAmount=3 behavior=alternate width=505><FONT color=red size=6><B>享受生活!</FONT></B></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE>

享受生活!

28.代码及效果如下:

<TABLE borderColorDark=#008060 cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#008000 background=http://znrs.2000y.net/UploadFile/2004-4/200442413260795.gif border=10>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=3 behavior=alternate width="90%">
<P align=center><FONT face=楷体_GB2312 color=#cccc00 size=5>一起分享这快乐</FONT></P></MARQUEE></TD></TR></TBODY></TABLE>

一起分享这快乐

 

朋友您辛苦了!

<MARQUEE direction=up>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://znrs.2000y.net/UploadFile/2004-5/2004510115258900.jpg>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center bgColor=red>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷 color=#336699>朋友您辛苦了!</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE></DIV>

 

 

落入凡间的精灵

</B><BR><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 100%" face=汉鼎繁随意 size=6>落入凡间的精灵</FONT><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #ff00ff; LINE-HEIGHT: 100%; FONT-FAMILY: 汉鼎繁中变" size=6></FONT><FONT color=#ff00ff> </FONT>
<DIV></DIV>
<P></P>

<CENTER><FONT face=隶书 color=red size=15>
<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=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=80>精</MARQUEE><FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=120>灵</MARQUEE></FONT></B></MARQUEE></FONT></CENTER></FONT></FONT></FONT></FONT></FONT></FONT>


鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 22:06 | 显示全部楼层

以下所有字体和文字特效,均用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>

鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 22:07 | 显示全部楼层
欢迎大家跟贴添加。
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 22:57 | 显示全部楼层
谢谢逍遥的添加。
鲜花(7) 鸡蛋(0)
 楼主| 发表于 2009-8-11 23:33 | 显示全部楼层
这个好,但页面高是否可以缩一下。
下面好大一片空白呢。
您需要登录后才可以回帖 登录 | 注册

本版积分规则


GMT+8, 2024-12-22 14:40 , Processed in 0.060072 second(s), 18 queries , Gzip On, Redis On.


快速回复 返回顶部 返回列表