雨后惊鸿网易博客

素材网站

日志

关于我

雨后惊鸿

越是成熟的稻穗,就越懂得弯腰。

文章分类

滚动文字特效大全

2008-08-20 13:33:15| 分类：【博客技巧】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

哥们干杯！的滚动文字特效大全

引用

霍斯的滚动文字特效大全

部分文字代码收集于网络博友,感谢博友提供,霍斯本人收集,并进行代码优化,整理,做出滚动效果.

1.阴影滚动字

循环滚动:
欢迎来到幽幽世界
代码:

<marquee scrollamount=3 FONT style="COLOR=FF0000; FILTER: shadow(color=FFFF33 ); FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%">欢迎来到幽幽世界</marquee>

来回移动:
欢迎来到幽幽世界
代码:

<marquee behavior="alternate" scrollamount=2 FONT style="COLOR=3300FF; FILTER: shadow(color=33FFFF ); FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%">欢迎来到幽幽世界</MARQUEE>

2.投射阴影滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 font style="FILTER: Shadow(color=#660099,direction=135); HEIGHT: 10pt;font-size:25pt" face="隶书" color=#009900>幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior=alternate font style="FILTER: Shadow(color=#660099,direction=135); HEIGHT: 10pt;font-size:25pt" face="隶书" color=#009900>幽幽世界欢迎你</marquee>

3.发光滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="COLOR: #0033CC; FILTER: glow(color=FFFF66); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; WIDTH: 100%">幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior=alternate FONT style="COLOR: #0033CC; FILTER: glow(color=FFFF66); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; WIDTH: 100%">幽幽世界欢迎你</marquee>

4.若隐若现滚动字

循环滚动:
幽幽世界欢迎你
代码:

<MARQUEE style="FONT-SIZE: 30pt; FILTER: alpha(opacity=100,style=3); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" scrollAmount=3 FONT>幽幽世界欢迎你</MARQUEE>

来回移动:
幽幽世界欢迎你
代码:

<MARQUEE behavior=alternate style="FONT-SIZE: 30pt; FILTER: alpha(opacity=100,style=3); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" scrollAmount=3 FONT>幽幽世界欢迎你</MARQUEE>

本代码属性分析:

opacity：设置透明度，取值0至100之间的任意数值，100表示完全不透明；

style：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变；

width：100%则表示参与渐变的对象的宽度，通常都设置为100%。

5.清晰阴影滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 20pt; FILTER: dropshadow(color=#228B22,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: #ff7f50; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior=alternate FONT style="FONT-SIZE: 20pt; FILTER: dropshadow(color=#228B22,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: #ff7f50; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">幽幽世界欢迎你</marquee>

6.波纹效果滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 30pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷">幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior=alternate FONT style="FONT-SIZE: 30pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷">幽幽世界欢迎你</marquee>

本代码属性分析:

add：波纹型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq：决定显示的频率，即应出现多少个波形；
phrase：决定波形的形状，值取0至360之间；
strength：决定波形的振幅

7.立体滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书">幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior=alternate FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书">幽幽世界欢迎你</marquee>

8.金属滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你
</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior="alternate" FONT style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你
</marquee>

9.空心金属滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你</marquee>

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior="alternate" FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你</marquee>

10.凹凸投影滚动字

循环滚动：
幽幽世界欢迎你
代码：

<marquee scrollamount=3 FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你</marquee>

来回移动：
幽幽世界欢迎你
代码：

<marquee behavior="alternate" scrollamount=3 FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你</marquee>

11.空心滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #cc0033; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你

来回移动:
幽幽世界欢迎你
代码:

<marquee behavior=alternate scrollamount=3 FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #cc0033; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">幽幽世界欢迎你

12.毛绒滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 SPAN style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: glow(color=red,strength=10); COLOR: blue; HEIGHT: 1px; TEXT-ALIGN: center">幽幽世界欢迎你

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior="alternate" SPAN style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: glow(color=red,strength=10); COLOR: blue; HEIGHT: 1px; TEXT-ALIGN: center">幽幽世界欢迎你

13.描边中空抛射滚动字

循环滚动:
幽幽世界欢迎您

代码:

<marquee scrollamount=3 DIV style="FILTER: shadow(color=#3300FF, strength=8); WIDTH: 490px">幽幽世界欢迎您 </DIV>

来回移动:
幽幽世界欢迎您
代码:

<marquee scrollamount=3 behavior="alternate" DIV style="FILTER: shadow(color=#3300FF, strength=8); WIDTH: 490px">幽幽世界欢迎您 </DIV>

14.投影滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 SPAN style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: blur(add=t,direction=135,strength=10); COLOR: darkblue; HEIGHT: 1px; TEXT-ALIGN: center">幽幽世界欢迎你

来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior="alternate" SPAN style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: blur(add=t,direction=135,strength=10); COLOR: darkblue; HEIGHT: 1px; TEXT-ALIGN: center">幽幽世界欢迎你

15.波浪滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 span style="font-size:30pt;display:block;text-align:center;color:darkblue;filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);height:1">幽幽世界欢迎你
来回移动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 behavior="alternate" span style="font-size:30pt;display:block;text-align:center;color:darkblue;filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);height:1">幽幽世界欢迎你

16.阴影滚动字

循环滚动:
幽幽世界欢迎你
代码:

<marquee scrollamount=3 span style="font-size:30pt;display:block;text-align:center;color:darkblue;filter:shadow(color=blue);height:1">幽幽世界欢迎你

来回移动:
幽幽世界欢迎你
代码:

<MARQUEE style="DISPLAY: block; FONT-SIZE: 30pt; FILTER: shadow(color=blue); COLOR: darkblue; HEIGHT: 1px; TEXT-ALIGN: center" scrollAmount=3 behavior=alternate span>幽幽世界欢迎你</MARQUEE>

17.重叠文字滚动

循环滚动:
幽幽世界欢迎你

代码:

<marquee scrollamount=3 div align="center" style="height:1;font-size:30pt;filter:dropshadow(color=maroon,positive=1);">幽幽世界欢迎你</div>

来回移动:
幽幽世界欢迎你

代码:

<marquee scrollamount=3 behavior=alternate div align="center" style="height:1;font-size:30pt;filter:dropshadow(color=maroon,positive=1);">幽幽世界欢迎你</div>

18.竖排文字滚动

我的心除了你还有谁
可为何却在半路出了轨
我们的爱像潮水
放纵之后化成灰
面对面又如何去面对
我的心除了你不再有谁
却背叛了开在心里的玫瑰
我们的爱像潮水
放纵之后收不回
这辈子来不及向你忏悔

请不要离开我
在这下雨的时候
请不要离开我
当我独自喝醉在街头
请不要离开我
绝不放开你的手
哭的时候让泪往心里流
请不要离开我
在这下雨的时候
请不要离开我
当我独自喝醉在街头
请不要离开我
绝不放开你的手
哭的时候让泪往心里流

代码:

<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=480 height=150>
<MARQUEE style="LINE-HEIGHT: 150%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=480 height=220>
我的心除了你还有谁 可为何却在半路出了轨 我们的爱像潮水 放纵之后化成灰 面对面又如何去面对 我的心除了你不再有谁 却背叛了开在心里的玫瑰 我们的爱像潮水 放纵之后收不回 这辈子来不及向你忏悔 请不要离开我 在这下雨的时候 请不要离开我 当我独自喝醉在街头 请不要离开我 绝不放开你的手 哭的时候让泪往心里流 请不要离开我 在这下雨的时候 请不要离开我 当我独自喝醉在街头 请不要离开我 绝不放开你的手 哭的时候让泪往心里流 </MARQUEE></MARQUEE></DIV>

本页代码基本综合属性分析:

color=66FF33 颜色代码 可参见颜色代码大全更改颜色

size=2 字体大小代码更改数值改变字体大小

FONT-SIZE: 30pt 字体大小代码更改数值改变字体大小

FONT-FAMILY: 华文行楷 字体代码改变字体描述更改字体

scrollamount=3: 移动速度代码可改变数值来控制文字的滚动速度

behavior="alternate": 来回移动代码

霍斯见解:

 大家看到了这些漂亮的滚动字,想用哪个就拿去复制一下,当然方便又好用,但是本人想法,活学活用,不要一味的去复制粘贴,复制再粘贴,那样做出来的永远是别人的风格,没有自己的个性不是吗,所以我希望大家在使用代码的时候多少会有一些自己的改动,比如说颜色,字体,这些并不难办到的,如果你是高手也可以代码与代码之间套用,做出更高级的风格,当然,你要特别喜欢当前风格,直接粘来使用也没什么,呵呵,最后祝大家都能做出自己漂亮的世界

更多精彩内容，点击哥们日志链接浏览！

●芝麻开门● ●谈天说地● ●游戏天地● ●心理测试● ●健康饮食● ●国学讲堂● ●我的视频● ●在线工具● ●教师博览● ●博客素材● ●我的原创● ●法制时空● ●哥们聊天● ●给我留言● ●

喜欢我的博客吗？

点击这里订阅我的博客！

评论这张

转发至微博

阅读(1135)| 评论(6)

历史上的今天

this.p={ m:2,
 b:2,
 loftPermalink:'',
 id:'fks_085067082083082069083086094095083086085064084085080070',
 blogTitle:' 滚动文字特效大全',
 blogAbstract:'<P\><EM\></EM\> </P\>\r\n<BLOCKQUOTE\><A href=\"http://cykctadcl.blog.163.com/\" target=_blank\>哥们干杯！</A\> 的 <A href=\"http://cykctadcl.blog.163.com/blog/static/42292996200812724531976\" target=_blank\>滚动文字特效大全</A\><BR\>\r\n<P\><EM\>引用</EM\></P\>\r\n<BLOCKQUOTE\><A href=\"http://hp-jiang.blog.163.com/\" target=_blank\>霍斯</A\> 的 <A href=\"http://hp-jiang.blog.163.com/blog/static/291111862007575234803\" target=_blank\>滚动文字特效大全</A\><BR\>\r\n部分文字代码收集于网络博友,感谢博友提供,霍斯本人收集,并进行代码优化,整理,做出滚动效果.</FONT\> </P\>\r\n<P\>1.阴影滚动字</FONT\></P\>\r\n<P\><STRONG\>循环滚动:</STRONG\></FONT\></P\>\r\n<MARQUEE\></MARQUEE\></BLOCKQUOTE\></BLOCKQUOTE\>',
 blogTag:'博客技巧',
 blogUrl:'blog/static/70430365200872013315783',
 isPublished:1,
 istop:false,
 type:2,
 modifyTime:1224598034510,
 publishTime:1219210395783,
 permalink:'blog/static/70430365200872013315783',
 commentCount:6,
 mainCommentCount:6,
 recommendCount:1,
 bsrk:-100,
 publisherId:0,
 recomBlogHome:false,
 currentRecomBlog:false,
 attachmentsFileIds:[],
 vote:{},
 groupInfo:{},
 friendstatus:'none',
 followstatus:'unFollow',
 pubSucc:'',
 visitorProvince:'',
 visitorCity:'',
 visitorNewUser:false,
 postAddInfo:{},
 mset:'000',
 mcon:'',
 srk:-100,
 remindgoodnightblog:false,
 isBlackVisitor:false,
 isShowYodaoAd:false,
 hostIntro:'越是成熟的稻穗,就越懂得弯腰。',
 hmcon:'1',
 selfRecomBlogCount:'0',
 lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
 }

{list a as x}
 {if !!x}
 <div class="iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
 {if x.visitorName==visitor.userName}
 <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
 {else}
 <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
 {/if}
 </a>
 <div class="cwd vname thide">
 {if x.moveFrom=='wap'}
 <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"> </a>
 {elseif x.moveFrom=='iphone'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='android'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='mobile'}
 <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"> </a>
 {/if}
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
 ${fn(x.visitorNickname,8)|escape}
 </a>
 </div>
 </div>
 {/if}
 {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

推荐过这篇日志的人：
 <div>
 {list a as x}
 {if !!x}
 <div class="iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
 <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
 </a>
 <div class="cwd thide">
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
 ${fn(x.recommenderNickname,6)|escape}
 </a>
 </div>
 </div>
 {/if}
 {/list}
 </div>
 {if !!b&&b.length>0}
 他们还推荐了：
 <ul>
 {list b as y}
 {if !!y}
 <li class="rrb">·<a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/70430365200872013315783">${y.recommendBlogTitle|escape}</a></li>
 {/if}
 {/list}
 </ul>
 {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
 {if !!x}
 <div class="hotItem iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
 {if x.publisherUsername==visitor.userName}
 <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
 {else}
 <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
 {/if}
 </a>
 <div class="cwd vname thide">
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
 ${fn(x.publisherNickname,8)|escape}
 </a>
 </div>
 <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
 </div>
 {/if}
 {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

雨后惊鸿网易博客

导航

日志

滚动文字特效大全

历史上的今天

最近读者

热度

评论

页脚