動態文字特效代碼

06-04

編輯：平安如意

平安如意歡迎你！☆沒能一一回訪，請諒解!記得留言哦!☆ 文字的動態特效處理與圖片類似，都是<marquee>這個參數在起作用。給<marquee>加上合適的屬性，就能使文字產生各種動態效果，從而給人帶來美的享受。一、文字單向直線滾動(一)代碼格式<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>文字內容</B> </FONT></P></MARQUEE></DIV>說明：文字滾動方向 direction= left 或right 或up 或down，分別表示向左(默認可省略)、向右、向上、向下。(二)效果示例1、示例一——文字左移平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 80px" scrollAmount=6><P align=center><FONT color=#f90b46>平安如意歡迎您 </FONT></P></MARQUEE></DIV>2、示例二——文字右移您迎歡意如安平本例代碼<P align=center><MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 楷體_gb2312; HEIGHT: 60px" scrollAmount=6 direction=right><P align=center><FONT color=#FF9224><B>您迎歡意如安平</B></FONT></P></MARQUEE></P>3、示例三——文字上移平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文彩雲; HEIGHT: 120px" scrollAmount=3 direction=up><P align=center><FONT color=#B766AD><B>平安如意歡迎您</B></FONT></P></MARQUEE></DIV>踏破鐵鞋無覓處得來全不費功夫本例代碼<CENTER><MARQUEE scrollAmount=3 direction=up height=60><CENTER><FONT face=華文彩雲 color=#ff0000 size=6><B>踏破鐵鞋無覓處</B></FONT></CENTER></B></MARQUEE><CENTER><MARQUEE scrollAmount=3 direction=up height=60><CENTER><FONT face=華文彩雲 color=#ff0000 size=6><B>得來全不費功夫</B></FONT></CENTER></B></MARQUEE></CENTER></CENTER>4、示例四——文字下移平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; WIDTH: 400px; FILTER: glow(color=ffffff,strength=0) shadow(color=cccccc,direction:135); LINE-HEIGHT: 15pt; FONT-FAMILY: 華文新魏; HEIGHT: 120px" scrollAmount=3 direction=down><P align=center><FONT color=#008040><B>平安如意歡迎您</B></FONT></P></MARQUEE></DIV>踏破鐵鞋無覓處得來全不費功夫本例代碼<CENTER><MARQUEE scrollAmount=3 direction=down height=60><CENTER><FONT face=華文彩雲 color=#ff9224 size=6><B>踏破鐵鞋無覓處</B></FONT></CENTER></B></MARQUEE><CENTER><MARQUEE scrollAmount=3 direction=down height=60><CENTER><FONT face=華文彩雲 color=#ff9224 size=6><B>得來全不費功夫</B></FONT></CENTER></B></MARQUEE></CENTER></CENTER>二、文字傾斜滾動(一)代碼格式<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=文字顏色代碼>文字內容</FONT></MARQUEE></DIV></MARQUEE></DIV>說明：direction=D1=left 或right，direction=D2=up 或down。(二)效果示例1、示例一——文字自左上向右下滾動平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: shadow(color=#333366,direction=240); LINE-HEIGHT: 15pt; FONT-FAMILY: 黑體; HEIGHT: 200px" scrollAmount=5 direction=right><DIV align=center><MARQUEE scrollAmount=2 direction=down><FONT color=#3333ff><B>平安如意歡迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>2、示例二——文字自右上向左下滾動平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=5); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文行楷; HEIGHT: 200px" scrollAmount=5><DIV align=center><MARQUEE scrollAmount=2 direction=down><FONT color=#ff0000><B>平安如意歡迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>3、示例三——文字自左下向右上滾動平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033); LINE-HEIGHT: 15pt; FONT-FAMILY: 華文新魏; HEIGHT: 200px" scrollAmount=5 direction=right><DIV align=center><MARQUEE scrollAmount=2 direction=up><FONT color=#ff0000><B>平安如意歡迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>4、示例四——文字自右下向左上滾動平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 30pt; FILTER: mask(color=#a09261) shadow(color=#000000,direction=135) chroma(color=#a09261); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文新魏; HEIGHT: 200px" scrollAmount=5><DIV align=center><MARQUEE scrollAmount=2 direction=up><FONT color=#ff0000><B>平安如意歡迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>三、文字反相滾動(一)代碼格式<P align=center><MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=文字滾動速度 direction=文字滾動方向1><FONT color=文字顏色代碼>文字內容</FONT></MARQUEE><MARQUEE style="FONT-SIZE: 文字大小pt; WIDTH: 顯示窗口寬度px; LINE-HEIGHT: 文字行間距pt; FONT-FAMILY: 字體; HEIGHT: 顯示窗口高度px" scrollAmount=文字滾動速度 direction=文字滾動方向2><FONT color=文字顏色代碼>文字內容</FONT></MARQUEE></P>說明：1、關於direction：文字滾動方向1與文字滾動方向2始終為反相。2、當水平反相滾動時，width之值為顯示窗口寬度的1/2；當垂直反相滾動時，height之值為顯示窗口高度的1/2。(二)文字水平反相滾動1、示例一——文字自中間向左右兩邊滾動平安如意歡迎您您迎歡意如安平本例代碼<P align=center><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 60px" scrollAmount=5><FONT color=#0000ff>平安如意歡迎您</FONT></MARQUEE><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 60px" scrollAmount=5 direction=right><FONT color=#0096ff>您迎歡意如安平</FONT></MARQUEE></P>2、示例二——文字自左右兩邊向中間滾動您迎歡意如安平平安如意歡迎您本例代碼<P align=center><MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文彩雲; HEIGHT: 60px" scrollAmount=3 direction=right><FONT color=#e4dc9b>您迎歡意如安平</FONT></MARQUEE><MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文彩雲; HEIGHT: 60px" scrollAmount=3><FONT color=#e4dc9b>平安如意歡迎您</FONT></MARQUEE></P>(三)文字垂直反相滾動1、示例一——文字自中間向上下滾動菜鳥玩博也瀟洒菜鳥玩博也瀟洒本例代碼<P align=center><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑體; HEIGHT: 50px" scrollAmount=2 direction=up align=center><FONT color=#0000ff>菜鳥玩博也瀟洒</FONT></MARQUEE><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 黑體; HEIGHT: 50px" scrollAmount=2 direction=down><TABLE style="FILTER: FlipV" align=center><FONT color=#0096ff>菜鳥玩博也瀟洒</FONT><TBODY></TBODY></TABLE></MARQUEE></P>2、示例二——文字自上下向中間滾動菜鳥玩博也瀟洒菜鳥玩博也瀟洒本例代碼<P align=center><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 40px" scrollAmount=2 direction=down><FONT color=#0000ff>菜鳥玩博也瀟洒</FONT></MARQUEE><MARQUEE style="FONT-SIZE: 40pt; WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 40px" scrollAmount=2 direction=up><FONT color=#0096ff>菜鳥玩博也瀟洒</FONT></MARQUEE></P>四、文字往複滾動(一)代碼格式<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=文字顏色代碼>文字內容</FONT></P></MARQUEE></DIV>說明：水平往複滾動(擺動)時，direction=D=left 或可預設；垂直往複滾動(振動)時，direction=D=up。(二)效果示例1、示例一——文字水平往複滾動(擺動)平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 40pt; FILTER: glow(color=#ff0000<br>,strength=6); WIDTH: 600px; LINE-HEIGHT: 15pt; FONT-FAMILY: 華文行楷; HEIGHT: 80px" scrollAmount=10 direction=right behavior=alternate><P align=center><FONT color=#ffff00>平安如意歡迎您</FONT></P></MARQUEE></DIV>2、示例二——文字垂直往複滾動(振動)平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; FILTER: shadow(color=#87CEFA, strength=50); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隸書; HEIGHT: 180px" scrollAmount=10 direction=up behavior=alternate><P align=center><FONT color=#1e90ff>平安如意歡迎您</FONT></P></MARQUEE></DIV>3、示例三——文字交替跳躍但願人長久本例代碼<CENTER><DIV style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 500px; COLOR: #ff6600; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"><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><MARQUEE direction=up behavior=alternate width_=80 height=160><CENTER><B>久</B></CENTER></MARQUEE></MARQUEE></DIV></CENTER>4、示例四——帶漂亮的模糊背景文字交替跳躍千里共嬋娟本例代碼<CENTER><DIV style="FONT-SIZE: 40pt; FILTER: glow(color: #00cc00,strength=60); WIDTH: 650px; COLOR: #ECF5FF; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"><MARQUEE direction=up behavior=alternate width_=120 height=280><CENTER><B>千</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=210><CENTER><B>里</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=280><CENTER><B>共</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=210><CENTER><B>嬋</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=280><CENTER><B>娟</B></CENTER></MARQUEE></DIV></CENTER>5、示例五——文字交替跳躍消失菜鳥玩博本例代碼<P align=center><MARQUEE style="WIDTH: 500px; HEIGHT: 300px" scrollAmount=8 direction=up><CENTER><DIV style="FONT-SIZE: 40pt; FILTER: glow(color=BLUE,strength=50); WIDTH: 100%; COLOR: yellow; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲"><MARQUEE direction=up behavior=alternate width_=120 height=280><CENTER><B>菜</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=220><CENTER><B>鳥</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=280><CENTER><B>玩</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width_=120 height=220><CENTER><B>博</B></CENTER></MARQUEE></DIV></CENTER></MARQUEE></P>五、文字波浪式滾動(一)文字單向波浪式滾動平安如意歡迎您本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 華文新魏; HEIGHT: 180px" scrollAmount=5 direction=up behavior=alternate><DIV align=center><MARQUEE scrollAmount=3 behavior=altrnate width_=460><DIV align=center><FONT color=#ff0033><B>平安如意歡迎您</B></FONT></DIV></MARQUEE></DIV></MARQUEE></DIV>(二)文字往複波浪式滾動菜鳥玩博也瀟洒本例代碼<DIV align=center><MARQUEE style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 隸書; HEIGHT: 250px" scrollAmount=5 direction=up behavior=alternate><DIV align=center><MARQUEE scrollAmount=5 behavior=alternate width_=600><DIV align=center><FONT color=#ff0033><B>菜鳥玩博也瀟洒</B></FONT></DIV></MARQUEE></DIV></MARQUEE></DIV>(三)文字交替式遊盪平安如意歡迎朋友您<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>六、文字豎排漸出效果這種特效用於顯示詩歌尤其古詩詞效果很好，若加上合適的背景則效果更好！水調歌頭蘇軾明月幾時有把酒問青天不知天上宮闕今夕是何年我欲乘風歸去唯恐瓊樓玉宇高處不勝寒起舞弄清影何似在人間轉朱閣低綺戶照無眠不應有恨何事長向別時圓人有悲歡離合月有陰晴圓缺此事古難全但願人長久千里共嬋娟我欲乘風歸去唯恐瓊樓玉宇高處不勝寒起舞弄清影何似在人間轉朱閣低綺戶照無眠不應有恨何事長向別時圓人有悲歡離合月有陰晴圓缺此事古難全但願人長久千里共嬋娟示例一——無背景文字豎排漸出效果水調歌頭蘇軾明月幾時有把酒問青天不知天上宮闕今夕是何年我欲乘風歸去唯恐瓊樓玉宇高處不勝寒起舞弄清影何似在人間轉朱閣低綺戶照無眠不應有恨何事長向別時圓人有悲歡離合月有陰晴圓缺此事古難全但願人長久千里共嬋娟我欲乘風歸去唯恐瓊樓玉宇高處不勝寒起舞弄清影何似在人間轉朱閣低綺戶照無眠不應有恨何事長向別時圓人有悲歡離合月有陰晴圓缺此事古難全但願人長久千里共嬋娟示例二——有背景文字豎排漸出效果<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>水調歌頭<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></FONT></P></MARQUEE></MARQUEE></DIV></TD></TR></TBODY></TABLE>示例二代碼七、文字與圖片相對運動特效(一)文字在圖片間穿梭效果國國

慶慶

快快

樂樂

(二)文字從圖片上部穿過效果菜

鳥

玩

博

(三)文字在圖片中遊盪效果

平安如意歡迎您

<TABLE style="WIDTH: 650px; HEIGHT: 139px" borderColor=#00fa9a height=139 width_=650 align=center background=http://image9.360doc.com/DownloadImg/2010/05/1314/3185755_2.jpg border=3><TBODY><TR><TD><MARQUEE scrollAmount=3 direction=down behavior=alternate height=130><MARQUEE scrollAmount=3 behavior=alternate width_=620><IMG src="https://www.getit01.com/getimg_360.php?url=http://img.photo.163.com/cmstqVffIaAWrp0svC7Msg==/147774362774718602.gif"><FONT face=華文行楷 color=#800080 size=6><B><FONT face=楷體_GB2312 color=#00ffff>平安如意歡迎您</FONT><IMG src="https://www.getit01.com/getimg_360.php?url=http://img.photo.163.com/QVaf6xvlEjtvFHXktDTIzQ==/147774362774718604.gif"></B></FONT></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>附註1、各主要參數的含義：align：是設定活動對象(圖片或文字)的位置；direction：用於設定活動對象的滾動方向是向左、向右、向上、向下；Behavior：用於設定滾動的方式，主要由三種方式：behavior="scroll"表示由一端滾動到另一端；behavior="slide" 表示由一端滑動到另一端，且不再重複；behavior="alternate"表示在兩端之間來回滾動。Height：用於設定滾動對象的高度；Width：則設定滾動對象的寬度；Hspace和vspace：分別用於設定滾動對象的左右邊框和上下邊框的寬度；Scrollamount：用於設定活動對象的滾動距離；數值越大滾動越快；scrolldelay：用於設定滾動兩次之間的延遲時間，數值越大越有跳躍感；Loop：用於設定滾動的次數，不設置該值則為無限循環；<marquee>標記的默認情況是向左滾動無限次，字幕高度是文本高度，滾動範圍：水平滾動的寬度是當前位置的寬度；垂直滾動的高度是當前位置的高度。2、代碼使用方法：(1)放於博客主頁：在編輯狀態下，依次進入「裝扮博客」、「設置首頁內容」，選擇「添加自定義模塊」，將代碼粘貼到模塊中，合理設置後再保存即可。(2)放於日誌中：在編輯狀態下，進入寫日誌或編輯原有日誌，依次點擊「全部功能」、「<>」按鈕，進入HTML代碼編輯狀態，將相關代碼粘貼到合適位置，合理設置後再保存即可。平安如意的動態文字特效代碼
推薦閱讀：

※任時光流去，你會找到對的那個人
※二廠開工——Fake Hieroglyph (1)
※【二零一四淨土大經科注】第三六五集（文字版）
※修行與生活座談會文字版　　定弘法師主講　　（第一八０集）

TAG:代碼 | 文字 | 動態 |