html特效代碼 綜合效果滾動及代碼

01、陰影字左右來回滾動

代碼：

<div class="cnt"><p align="center"><marquee behavior="alternate" scrollamount=4 FONT style="COLOR=#FF0000  ; FILTER: shadow(color=#FFDDEE , direction=225); FONT-FAMILY:仿宋_GB2312; FONT-SIZE: 26pt; WIDTH: 60%"><i><b>陰影字來回滾動效果</b><i></MARQUEE></p></div>

---

02、文字若隱若現滾動

代碼：

<div align=center WIDTH: 60%>
<MARQUEE style="FONT-SIZE: 24pt; FILTER: alpha(opacity=100, style=3); WIDTH: 500px; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY:隸書" scrollAmount=3 FONT>若隱若現若隱若現</FONT></MARQUEE></div>

---

03、投影字滾動

代碼：

<div class="cnt"><p align="center" ><marquee style="WIDTH:60%; HEIGHT:60px" scrollamount="4" direction="left" ><div align="left" ><TABLE align=center ><DIV align=center><DIV style="FILTER: glow(color=#ff0033 strength=6); WIDTH: 100%; COLOR: #ff00ff"; >
<DIV style="FILTER: shadow(color=#ff0033, strength=20 direction=45); WIDTH: 540px; HEIGHT: 60px">
<br><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 34px; LINE-HEIGHT: 100%;
FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書 color=#FFCCCC >
投影字滾動效果投影字滾動效果
</FONT></DIV></DIV></DIV></TABLE></font ></font ></font ></p></div >

---

04、兩行文字相背滾動

代碼：

<DIV align=center align=center width=60%><FONT face=隸書 color=#00ff00 size=6>
<MARQUEE width=240 height=50>歡迎你朋友</FONT></MARQUEE><FONT face=隸書 color=#00ff00 size=6><MARQUEE direction=right width=240 height=50>友朋你迎歡
</MARQUEE></FONT></FONT></DIV>

---

05、兩行文字相對滾動

代碼：

<div align=center><MARQUEE direction=right width=300 height=25><FONT face=隸書 color=#ff0000  size=6>你給獻玫瑰</FONT></MARQUEE></FONT> <MARQUEE width=300 height=25><FONT face=隸書 color=#ff0000 size=6>玫瑰獻給你</FONT></MARQUEE></div>

---

06、上下文字合併滾動

代碼：

<MARQUEE scrollAmount=4 direction=down height=60>
<CENTER><FONT style="FONT-SIZE: 26pt; WIDTH: 100%; COLOR: #FF0000 ; LINE-HEIGHT: 150%; FONT-FAMILY:隸書">上組文字上組文字</FONT></CENTER></MARQUEE>
<MARQUEE scrollAmount=4 direction=up height=60>
<CENTER><FONT style="FONT-SIZE: 26pt; WIDTH: 100%; COLOR: #FF0000 ; LINE-HEIGHT: 150%; FONT-FAMILY:隸書">下組文字下組文字</FONT></CENTER></MARQUEE>

---

07、文字交替跳躍

代碼：

<CENTER><FONT style="FONT-SIZE: 28pt; FILTER: glow(color: #CC3300 ,pink=25); WIDTH: 100%; COLOR: #FFCC99 ; LINE-HEIGHT: 150%; FONT-FAMILY: 隸書">
<MARQUEE direction=up behavior=alternate width=80 height=100>
<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=100>
<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=100>
<CENTER><B>字</B></CENTER></MARQUEE></MARQUEE></FONT></CENTER>

---

08、文字百葉窗式滾動（無背景）

填寫標題填寫標題填寫標題

代碼：

<table width="400" border="0" align="center">
<tr><td><div align="center" ><FONT face=宋體  color=#FF0000 size=4>
填寫標題填寫標題填寫標題
</FONT></div></td></tr></table>
<CENTER>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>這</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>裏</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>是</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>顯</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>示</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>的</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>文</B></FONT></B>
</MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=68 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000><B>字</B></FONT></B>
</MARQUEE></FONT></CENTER></DIV></DIV></DIV></DIV>

-----------------------------------------------------------------------------------------

給上面的滾動文字添加背景

代碼：

<table width="600" height="100" border="0" align="center" cellpadding="0" cellspacing="20"  background="http://hiphotos.baidu.com/%CB%D5%D1%EF%B8%FB%B7%F2/pic/item/88c479d02aabe56d9b50279b.jpg"><tr><td align="center"  valign="middle">
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 40pt;

LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=華文彩雲 color=#ff0000></FONT>
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>這</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>裏</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>是</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>顯</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>示</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>的</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>文</B></font></MARQUEE>
<MARQUEE scrollAmount=4 width=60 height=60 scrolldely="10" align="center">
<p align="center"><font color="#ff0000" face="華文彩雲" style="FONT-WEIGHT: normal; FONT-SIZE: 40pt; LINE-HEIGHT: normal;

FONT-STYLE: normal; FONT-VARIANT: normal"><B>字</B></font></MARQUEE></td></tr></table>

---

09、發光字上下跳躍

代碼：

<CENTER><FONT style="FONT-SIZE: 22pt; FILTER: glow(color:#ee99ff,strength=25); WIDTH: 100%; COLOR: #ee0066; LINE-HEIGHT: 150%; FONT-FAMILY: 隸書">
<MARQUEE direction=up behavior=alternate width=100 height=180>
<CENTER>=我=</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=100 height=110>
<CENTER>=們=</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=100 height=180>
<CENTER>=一=</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=100 height=110>
<CENTER>=起=</CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=100 height=180>
<CENTER>=跳=</CENTER></MARQUEE></FONT></CENTER>

---

10、多文字交替滾動

代碼：

<MARQUEE style="FONT-SIZE: 22pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); FONT-FAMILY: 華文新魏; HEIGHT: 200px" scrollAmount=8 direction=right behavior=alternate><STRONG>
<FONT color=#FF0000><MARQUEE direction=up behavior=alternate width=50 height=150>1</MARQUEE>
<FONT color=#800040><MARQUEE direction=up behavior=alternate width=50 height=100>6</MARQUEE>
<FONT color=#008040><MARQUEE direction=up behavior=alternate width=50 height=150>2</MARQUEE>
<FONT color=#FF00FF><MARQUEE direction=up behavior=alternate width=50 height=100>7</MARQUEE>
<FONT color=#FF8000><MARQUEE direction=up behavior=alternate width=50 height=150>3</MARQUEE>
<FONT color=#00FF00><MARQUEE direction=up behavior=alternate width=50 height=100>8</MARQUEE>
<FONT color=#0080FF><MARQUEE direction=up behavior=alternate width=50 height=150>4</MARQUEE>
<FONT color=#FF8080><MARQUEE direction=up behavior=alternate width=50 height=100>9</MARQUEE>
<FONT color=#FF0000><MARQUEE direction=up behavior=alternate width=50 height=150>5</MARQUEE>
</FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></STRONG></MARQUEE>

---

11、文字帶顏色背景滾動

代碼：

<MARQUEE scrollAmount=4 direction=up behavior="alternate" height=150>
<TABLE width=400 cellSpacing=0 cellPadding=0  align=center background=http://hiphotos.baidu.com/%CB%D5%D1%EF%B8%FB%B7%F2/pic/item/cdfce6ed4de6217363d09f0b.jpg>
<TD style="FILTER: chroma(color=#00FF00)"><TABLE align=center bgColor=#FF0000>
<TD width=400 align=center><FONT style="FONT-SIZE:36px" color=#00FF00 face=隸書>
寫內容寫內容寫內容
</FONT></TD></TD></TABLE></TABLE></MARQUEE>

---

12、文字帶圖片背景滾動

代碼：

<div class="cnt"><p align="center" ><marquee style="WIDTH:600px; HEIGHT:120px" scrollamount="4" direction="up" >
<div align="left"><DIV align=center><TABLE cellSpacing=0 cellPadding=0 align=center background=http://hiphotos.baidu.com/%CB%D5%D1%EF%B8%FB%B7%F2/pic/item/5e2115aefc2133affbed50c3.jpg>
<TBODY><TR><TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=http://hiphotos.baidu.com/%CB%D5%D1%EF%B8%FB%B7%F2/pic/item/f1d6afffd1af8c655d600867.jpg width=600 height=63><TBODY><TR><TD align=middle><FONT size=7 style="FONT-WEIGHT: normal; LINE-HEIGHT: 32px; FONT-STYLE: normal; FONT-VARIANT: normal" face=隸書  color=#336699>
這裏寫文字這裏寫文字
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></div></p></div >

---

 www.i0794.cn

www.bzff.cn

www.peng3y.com