[推荐]HTML特效代码及HTML中、高级篇教程（转贴2） [11-26] - 「茗畅园」音画教堂 - 花瓣雨音乐论坛花谢花飞瓣落如雨轻红软绿中音乐是爱人的手引着我们的心回家 - www.hebeimusic.com forum|music|Euro-american|New music|Electronic|Downloads|Absolute Music|Blues|Rock|Asian Music|Classical|Literatures

杀青 (泪)

Poster

ヤ你沉默所以我沉默ヤ

UID 17227
精华 2
积分 11661
帖子 171
威望 11661 点
现金 392240 花币
阅读权限 80
注册 2005-11-6
来自落花坞
状态离线

大中小

使用道具

发表于 2005-11-26 20:40 资料个人空间短消息加为好友

[推荐]HTML特效代码及HTML中、高级篇教程（转贴2） [11-26]

>滤镜让你更精彩

此特效代码如下：<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>滤镜1</B></FONT> Alpha滤镜：从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。而width:100%则表示参与渐变的对象的宽度，通常都设置为100%<br>

愿你喜欢它

此特效代码如下：<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>

学会了吗?

此特效代码如下：<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>

又一种滤镜

此特效代码如下：<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>又一种滤镜</B></FONT>

倒影效果

果效影倒

此特效代码如下：<p align=CENTER><FONT style="FONT-SIZE:30pt;filter:FlipV(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>倒影效果</B></FONT><br><p align=CENTER><FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>果效影倒</B></FONT>

圈边的字

此特效代码如下：<CENTER><br><DIV style="FONT-SIZE: 32pt; FILTER: glow(color=ffff00, strength=5); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">圈边的字</DIV></DIV><BR>

右阴影的字

此特效代码如下：<CENTER><br><DIV style="FONT-SIZE: 52pt; FILTER: dropshadow(color=000000, offx=3, offy=3, positive=1); WIDTH: 350px; COLOR: red; FONT-FAMILY: Arial; POSITION: relative">右阴影的字</DIV></DIV><BR>

你好棒！

此特效代码如下：<CENTER><br><TABLE cellSpacing=0 cellPadding=0 background=http://bbs.sbrw.org/UploadFile/2004-6/2004626171411674.gif><br><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><br><TABLE align=center bgColor=#83072D><TBODY><TR><br><TD><FONT face=华文琥珀 color=#336699 size=6><B>你好棒！</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER><BR></DIV><br><BR>

倒影

此特效代码如下：<P align=center><FONT face=华文行楷 style="COLOR: #e7d5cf; FONT-SIZE: 37pt; HEIGHT: 50px; WIDTH: 220px"><FONT style="COLOR: RED; FONT-SIZE: 27pt; HEIGHT: 10px; WIDTH: 220px">倒影</FONT> </FONT><br><P align=center>　<FONT face=华文行楷 style="COLOR: #e7d5cf; FONT-SIZE: 37pt; HEIGHT: 50px; WIDTH: 220px"> <br><P align=center><FONT style="COLOR: #e7d5cf; FONT-SIZE: 27pt; HEIGHT: 10px; WIDTH: 220px"><FONT id=ew style="COLOR:RED; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); FONT-SIZE: 27pt; HEIGHT: 10px; WIDTH: 220px">倒影</FONT></FONT></P></FONT><br><BR>

杀青 (泪)

Poster

ヤ你沉默所以我沉默ヤ

UID 17227
精华 2
积分 11661
帖子 171
威望 11661 点
现金 392240 花币
阅读权限 80
注册 2005-11-6
来自落花坞
状态离线

大中小

使用道具

发表于 2005-11-26 20:43 资料个人空间短消息加为好友

　　一、移动字体（字幕）基础

大家注意：可以结合上面的艺术文字部分使用，只是将“文字部分”全部用上面的文字代码替代！同时，图片也可以这样制作，只是注意高度和宽度要大于等于你的图片尺寸，可以试试。

　　　　代码：

　　　　注释：

　　（１）标签marquee：大帐篷，字幕。

　　（２）direction：方位，设置移动的方向。可取值up(向上)、down(向下)、left(向左)、right(向右)，默认值left(向左)。

　　（3）scrolldelay：移动延迟，以毫秒为单位，设置移动的延迟时间，默认值为90毫秒。

　　（4）scrollamount：移动量，设置移动的数量、速度。数量越大、速度越快。

　　（５）behavior：表现，设置移动的表现方式、效果。默认值scroll（一次次循环），可取值：

　　　　scroll：移动。滚动条效果，一次一次循环重复。
　　　　slide：滑动。幻灯片效果，只播放一次。
　　　　alternate：交替发生。交替循环，来回走动。

　　（６）align：对齐方式，可取值top(顶边对齐)、middle（垂直居中）、bottom（底边对齐），默认值top(顶边对齐)。

　　（７）width：宽。设定移动区域的宽度。可取值绝对值像素、相对值百分比，默认值为上一级区域的宽度。

　　（８）height：高。设定移动区域的高度。可取值绝对值像素、相对值百分比，默认值为字移动范围内的字体整体高度。

　　（９）loop：循环。设置移动的次数，默认值为无限循环。

　　（10）bgcolor：背景颜色。设置移动区域的背景颜色，默认为透明。

二、移动字体（字幕）实例

　　１、滚动条：

☆欢迎您到精品贴图来☆

　　　代码：<marquee width="300" height="30">☆欢迎您到精品贴图来☆</marquee>

　　2、来回走动：

☆欢迎您到精品贴图来☆

　　　代码：<marquee behavior="alternate" width="400" height="30"</FONT><FONT> direction="right"</FONT><FONT>>☆欢迎您到精品贴图来☆</marquee>

　　３、幻灯片：

☆欢迎您到精品贴图来☆

　　　代码：<marquee behavior="slide" width="400" height="30">☆欢迎您到精品贴图来☆</marquee>

　　４、走走停停：

☆欢迎您到精品贴图来☆

　　　代码：<marquee behavior="alternate" width="400" height="30" scrollamount="10" scrolldelay="300">☆欢迎您到精品贴图来☆</marquee>

　　５、字体飞翔＊

精品贴图宝典

　　　代码：

<MARQUEE behavior=alternate direction=up height=150 scrollAmount=5 width="400"><MARQUEE behavior=altrnate scrollAmount=2 width=400><FONT color=red face=楷体_gb2312 size=6>精品贴图宝典</FONT></MARQUEE></marquee>

　　６、分割镜像：

　　　注释：二个字幕的宽度不能大于或等于上一级区域的宽度；
　　　　　　后一个字幕的字、书出顺序必须相反。

精品贴图宝典典宝图贴品精

　　　代码：

<FONT face=华文行楷 color=#ee110e size=7><b><MARQUEE direction=left width=200 height=50>精品贴图宝典</MARQUEE></b></FONT><br> <FONT face=华文行楷 color=#ee1111 size=7><b><MARQUEE direction=right width=200 height=50>典宝图贴品精</MARQUEE></b></FONT>

贴图乐园园乐图贴

　　　代码：

欢迎光临精品贴图！欢迎光临精品贴图！

　　　　代码：

<P align=center><font color="#FF0000" size="6" face="华文行楷"><br><MARQUEE scrollAmount=2 direction=down height=60 width=400>欢迎光临精品贴图！</MARQUEE> <br><MARQUEE scrollAmount=2 direction=up height=60 width=400>欢迎光临精品贴图！</MARQUEE></font><P>

欢迎光临唯美贴图！欢迎光临精品贴图！

　　　　代码：

<P align=center><font color="#FF0000" size="6" face="华文行楷"><br><MARQUEE scrollAmount=2 direction=up height=60 width=400>欢迎光临精品贴图！</MARQUEE> <br><MARQUEE scrollAmount=2 direction=down height=60 width=400>欢迎光临精品贴图！</MARQUEE></font><P>

　　７、同进同出

大家好

　　　代码：

　　８、字体跳舞＊

字跳舞

　　　代码：

<MARQUEE scrollAmount=5 direction=right behavior=alternate><FONT color=red size=6><B><MARQUEE direction=up behavior=alternate width=40 height=60>字</MARQUEE><MARQUEE direction=up<br> behavior=alternate width=40 height=80>跳</MARQUEE><MARQUEE direction=up behavior=alternate width=40 height=60>舞</MARQUEE></b></font></marquee>

亲爱的朋友您好

　　　代码：

<P align=center><MARQUEE scrollAmount=5 direction=right behavior=alternate><font size="12" face="华文行楷"><b><br><font color="red"><br><MARQUEE direction=up behavior=alternate width=60 heig</div> <br style="clear: both"><font style="color: #A1A4B7; font: 12px Tahoma, Verdana"> </font> </td></tr> <tr><td align="right"> <a href="###" onclick="scroll(0,0)"><img src="images/yun/top.gif" border="0" alt="顶部" /></a> </td></tr> </table></td></tr></table></div> <div class="spaceborder" style="width: 99%; margin-bottom: 4px; "> <table cellspacing="" cellpadding="4" width="100%" align="center" class="t_row"> <tr style="height: 100%"> <td width="18%" valign="top" class="t_user"><a name="pid269733"></a> <a href="space-uid-17227.html" target="_blank" class="bold">杀青</a> <span class="smalltxt">(泪)</span> <br><div class="smalltxt"> Poster<br> <img src="images/yun/star_level1.gif" alt="Rank: 2" /><img src="images/yun/star_level1.gif" alt="Rank: 2" /><br> ヤ你沉默所以我沉默ヤ<br> <br> <table width="95%" border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed; overflow: hidden"> <tr><td align="center"><div class="avatar" style="width: 140"><img src="customavatars/17227.jpg" width="140" height="140" border="0" alt="" /></div></td></tr></table><br> UID 17227<br> 精华 <a href="digest.php?authorid=17227">2</a> <br> 积分 11661<br> 帖子 171<br> 威望 11661 点<br> 现金 392240 花币<br> 阅读权限 80<br> 注册 2005-11-6<br>来自落花坞<br> 状态离线 </div> </td> <td width="82%" valign="top" style="padding: 0px"> <table border="0" cellspacing="0" cellpadding="4" class="t_msg"> <tr><td> <div> <div class="right t_number"><a href="###" class="bold" title="复制帖子链接到剪贴板" onclick="setcopy('http://www.hebeimusic.com/viewthread.php?tid=20648&page=1#pid269733', '已经复制到剪贴板')">#3</a></div> <span class="right"> </span> <a href="###" class="right t_number" style="background-color: #3A3843" onclick="$('message269733').className='t_bigfont'">大</a> <a href="###" class="right t_number" style="background-color: #3A3843" onclick="$('message269733').className='t_msgfont'">中</a> <a href="###" class="right t_number" style="background-color: #3A3843" onclick="$('message269733').className='t_smallfont'">小</a> <div class="right" style="padding-top: 4px;"><a href="magic.php?action=user&pid=269733" target="_blank">使用道具</a> </div> <div style="padding-top: 4px;"> 发表于 2005-11-26 20:50 <a href="profile-uid-17227.html" target="_blank">资料</a> <a href="space-uid-17227.html" target="_blank" title="杀青的个人空间"> 个人空间</a> <a href="pm.php?action=send&uid=17227" target="_blank">短消息</a> <a href="memcp.php?action=buddylist&newbuddyid=17227&buddysubmit=yes" target="_blank" id="ajax_buddy_2" onclick="ajaxmenu(event, this.id)">加为好友</a> </div></div> </td></tr> <tr><td valign="top" class="line" height="100%" style="padding-top: 10px;"> <div style="float: right" align="right"> <a href="misc.php?action=viewratings&tid=20648&pid=269733" title="评分 0"></a> </div> <div id="message269733" class="t_msgfont">></TABLE><P align=center><FONT face=楷体_GB2312 color=#ff0033 size=6>高级篇</FONT></P><P align=center><TABLE borderColor=#ff00ff cellSpacing=50 cellPadding=0 width="900" align=center background=http://www.leiyu668.com/images/bj/bjj/074.jpg border=1><TR><TD width="100%"><P align=center><FONT style="FONT-SIZE: 30pt; FILTER: glow(color=#DAA520,strength=4); WIDTH: 100%; COLOR: #0000ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">透明flash及GIF动画的使用<BR></FONT></p><br><br>我个人将这个技术划分为框架定位和浮动定位。<br><br><p><FONT face=隶书 color=#ff0000 size=+2>框架定位</FONT><br><br>首先我来介绍第一种，在表格框架内加入flash，注意，做法的精髓在于图片做背景，flash叠加在上面！！前面我已经介绍了如何使用多层表格得到带有框架的页面，这里就不做介绍了。在嵌入flsah前，有两个准备工作：<br>1、找到合适的图片，图片不要太大，因为一旦使用背景，图片大小不能改变！一般宽度在480～640之间最合适。<br>2、找到合适的flash，这个比较重要，第一，flash必须是透明的，这个在很多网站有素材，可以搜索，或者看其他人的网页，注意保留flash的类型和地址。第二，必须和你的图片很好的搭配才体现出美。下面举例说明如何使用。<br><br>例如，我找到的这张图片是宽度＝617，高度＝424的（看图片属性的时候有显示），那么我的表格就做617×424的，比如：height=424 width=617。然后，图片上有湖泊，而且面积和大，那么选用下雨模式的透明FLASH就很好了，同时，我们在加入flsah的时候要给出flash的大小最好，大小的确定要取决于背景图片，不要比图片大，小一点就可以，例如这里取height=410 width=600就合适了。<br>代码如下：你可以直接拷贝使用，需要改动的是图片地址，宽度、高度，flash的地址、宽度、高度。<P align=center><TEXTAREA rows=8 cols=50><P align=center><TABLE borderColor=#009900 height=424 cellSpacing=2 width=617 align=center background=http://img.pconline.com.cn/images/images/upload/bbs/2005/4/26/1/3/122/125/153/16/1114451581200457.jpg border=10><TR><TD><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.forshine.net/flash/6.swf width=600 height=410 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"></TD></TR></TABLE>

效果如下：

再来一个多层表格加多flash（光环加蝴蝶）的范例，代码如下：

效果如下：

浮动定位

这里关系到style的技术，很多朋友没有这方面的知识，讲解起来就很麻烦，所以我这里介绍简单的操作，办法仍然是拷贝模板，自己设计。先看代码：style="LEFT: 10px; WIDTH: 900px; POSITION: absolute; TOP: 3200px; HEIGHT: 580px"，想必那些英文单词我不用介绍了，大家全懂，就是定位和定义大小的，那么数值是什么概念呢？大家知道自己的计算机屏幕是1024×768，这个数值和上面语句的数值是一个单位，所以，根据你屏幕的位置，甚至下拉屏幕后大概的位置，你可以定义动画的近似位置，这个很难，主要是难以一次定位准确，即便测设结果也是有误差的，左右误差小，但是上下误差相对大，办法是跟贴测试，多实验几次就能做好。另外，这种定位代码可以加在你要贴如的GIF动画的代码内部，全部代码可以在你帖子代码的任何位置，习惯上我们放在后面。下面我定位一个蓝色小精灵在屏幕左上方。
效果可以看屏幕。代码如下：

再来一个烟火效果在屏幕中间。代码如下：

隐藏音乐

很多朋友问我为什么帖子听到音乐却没有播放器，这个很简单，我给出代码，大家只需要改掉音乐的地址就可以了，代码放在帖子的最后就完成了。
代码如下：

飛飛收集制作