編輯:平安如意
文字的動態(tài)特效處理與圖片類似,都是 <marquee>這個參數(shù)在起作用。給<marquee>加上合適的屬性,就能使文字產(chǎn)生各種動態(tài)效果,從而給人帶來美的享受。
一、文字單向直線滾動 (一)代碼格式
<DIV align=center> <MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=滾動速度值 direction=文字移動方向> <P align=center><FONT color=文字顏色代碼><B>文字內(nèi)容</B> </FONT></P></MARQUEE></DIV>
說明:文字滾動方向 direction= left 或right 或up 或down,分別表示向左(默認(rèn)可省略)、向右、向上、向下。
(二)效果示例 1、示例一——文字左移
2、示例二——文字右移
3、示例三——文字上移
4、示例四——文字下移
二、文字傾斜滾動 (一)代碼格式
<DIV align=center> <MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=滾動速度值 direction=D1> <DIV align=center> <MARQUEE scrollAmount=滾動速度值 direction=D2><FONT color=文字顏色代碼>文字內(nèi)容</FONT></MARQUEE></DIV></MARQUEE></DIV>
說明:direction=D1=left 或right,direction=D2=up 或down。
(二)效果示例 1、示例一——文字自左上向右下滾動
2、示例二——文字自右上向左下滾動
3、示例三——文字自左下向右上滾動
4、示例四——文字自右下向左上滾動
三、文字反相滾動 (一)代碼格式
<P align=center> <MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=文字滾動速度 direction=文字滾動方向1> <FONT color=文字顏色代碼> 文字內(nèi)容 </FONT> </MARQUEE> <MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=文字滾動速度 direction=文字滾動方向2> <FONT color=文字顏色代碼> 文字內(nèi)容 </FONT></MARQUEE> </P>
說明:1、關(guān)于direction:文字滾動方向1與文字滾動方向2始終為反相。 2、當(dāng)水平反相滾動時,width之值為顯示窗口寬度的1/2;當(dāng)垂直反相滾動時,height之值為顯示窗口高度的1/2。
(二)文字水平反相滾動 1、示例一——文字自中間向左右兩邊滾動
2、示例二——文字自左右兩邊向中間滾動
(三)文字垂直反相滾動 1、示例一——文字自中間向上下滾動
2、示例二——文字自上下向中間滾動
四、文字往復(fù)滾動 (一)代碼格式
<DIV align=center> <MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=文字滾動速度 behavior=alternate direction=D> <P align=center><FONT color=文字顏色代碼>文字內(nèi)容</FONT></P></MARQUEE> </DIV>
說明:水平往復(fù)滾動(擺動)時,direction=D=left 或可缺??;垂直往復(fù)滾動(振動)時,direction=D=up。
(二)效果示例 1、示例一——文字水平往復(fù)滾動(擺動)
2、示例二——文字垂直往復(fù)滾動(振動)
3、示例三——文字交替跳躍
4、示例四——帶漂亮的模糊背景文字交替跳躍
5、示例五——文字交替跳躍消失
五、文字波浪式滾動 (一)文字單向波浪式滾動
(二)文字往復(fù)波浪式滾動
(三)文字交替式游蕩
平
安
如
意
歡
迎
朋
友
您
<MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 華文行楷; HEIGHT: 250px" scrollAmount=8 direction=right behavior=alternate><STRONG><FONT color=#aaaaff> <MARQUEE direction=up behavior=alternate width=50 height=200 align="middle">平</MARQUEE><FONT color=#ff0000> <MARQUEE direction=up behavior=alternate width=50 height=150>安</MARQUEE><FONT color=#ffff37> <MARQUEE direction=up behavior=alternate width=50 height=200>如</MARQUEE><FONT color=#ff00ff> <MARQUEE direction=up behavior=alternate width=50 height=150>意</MARQUEE><FONT color=#ff8000> <MARQUEE direction=up behavior=alternate width=50 height=200>歡</MARQUEE><FONT color=#00ff00> <MARQUEE direction=up behavior=alternate width=50 height=150>迎</MARQUEE><FONT color=#00ffff> <MARQUEE direction=up behavior=alternate width=50 height=200>朋</MARQUEE><FONT color=#ffff37> <MARQUEE direction=up behavior=alternate width=50 height=150>友</MARQUEE><FONT color=#ff44ff> <MARQUEE direction=up behavior=alternate width=50 height=200>您</MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></STRONG></MARQUEE>
六、文字豎排漸出效果 這種特效用于顯示詩歌尤其古詩詞效果很好,若加上合適的背景則效果更好!
水調(diào)歌頭 蘇 軾
明月幾時有 把酒問青天 不知天上宮闕 今夕是何年 我欲乘風(fēng)歸去 唯恐瓊樓玉宇 高處不勝寒 起舞弄清影 何似在人間 轉(zhuǎn)朱閣 低綺戶 照無眠 不應(yīng)有恨 何事長向別時圓 人有悲歡離合 月有陰晴圓缺 此事古難全 但愿人長久 千里共嬋娟
我欲乘風(fēng)歸去 唯恐瓊樓玉宇 高處不勝寒 起舞弄清影 何似在人間 轉(zhuǎn)朱閣 低綺戶 照無眠 不應(yīng)有恨 何事長向別時圓 人有悲歡離合 月有陰晴圓缺 此事古難全 但愿人長久 千里共嬋娟
示例一——無背景文字豎排漸出效果
水調(diào)歌頭 蘇 軾
明月幾時有 把酒問青天 不知天上宮闕 今夕是何年 我欲乘風(fēng)歸去 唯恐瓊樓玉宇 高處不勝寒 起舞弄清影 何似在人間 轉(zhuǎn)朱閣 低綺戶 照無眠 不應(yīng)有恨 何事長向別時圓 人有悲歡離合 月有陰晴圓缺 此事古難全 但愿人長久 千里共嬋娟
我欲乘風(fēng)歸去 唯恐瓊樓玉宇 高處不勝寒 起舞弄清影 何似在人間 轉(zhuǎn)朱閣 低綺戶 照無眠 不應(yīng)有恨 何事長向別時圓 人有悲歡離合 月有陰晴圓缺 此事古難全 但愿人長久 千里共嬋娟
|
示例二——有背景文字豎排漸出效果
<TABLE height=338 cellSpacing=0 borderColorDark=#aab8ee cellPadding=0 width=450 align=center borderColorLight=#aab8ee background=http://img.photo.163.com/nwgoVlilgAwuUDUFx1KPHA==/662310620200613717.jpg border=1> <TBODY> <TR> <TD> <P align=center> </P> <P align=center> </P> <P align=center> </P> <DIV align=center> <MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=380 height=180> <MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=380 height=180> <P align=left><FONT style="FONT-SIZE: 16pt; FILTER: WIDTH: 100%; COLOR: #d9ffff; LINE-HEIGHT: 130%; FONT-FAMILY: 華文行楷" color=#ff0000>水調(diào)歌頭<BR> 蘇 軾<BR><BR>明月幾時有<BR>把酒問青天<BR>不知天上宮闕<BR>今夕是何年<BR>我欲乘風(fēng)歸去<BR>唯恐瓊樓玉宇<BR>高處不勝寒<BR>起舞弄清影<BR>何似在人間<BR>轉(zhuǎn)朱閣<BR>低綺戶<BR>照無眠<BR>不應(yīng)有恨<BR>何事長向別時圓 <BR>人有悲歡離合<BR>月有陰晴圓缺<BR>此事古難全<BR>但愿人長久<BR>千里共嬋娟<BR><BR>我欲乘風(fēng)歸去<BR>唯恐瓊樓玉宇<BR>高處不勝寒<BR>起舞弄清影<BR>何似在人間<BR>轉(zhuǎn)朱閣<BR>低綺戶<BR>照無眠<BR>不應(yīng)有恨<BR>何事長向別時圓<BR>人有悲歡離合<BR>月有陰晴圓缺<BR>此事古難全<BR>但愿人長久<BR>千里共嬋娟 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>
示例二代碼
七、文字與圖片相對運動特效 (一)文字在圖片間穿梭效果
國 國
慶 慶
快 快
樂 樂
(二)文字從圖片上部穿過效果
菜
鳥
玩
博
(三)文字在圖片中游蕩效果
平安如意歡迎您 |
|