启野的博客

淡淡的雾，淡淡的雨，淡淡的云彩悠悠的游。

日志

关于我

启野

B型天秤座

文章分类

HTML文字代码——移动文字（marquee标签移动文字与滤镜filter的结合）

2011-03-19 10:11:32| 分类： HTML专区 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

HTML

移动文字（marquee标签移动文字与滤镜filter的结合）

移动文字（marquee标签移动文字与滤镜filter的结合）博文简介

多样的marquee标签移动效果加上文字滤镜丰富画面，，让我们的网页更加丰富多彩。
博文未提到的属性问题和基本移动代码请点击：

HTML滤镜代码——filter 属性
 HTML文字代码——发光文字
 HTML文字代码——投射阴影文字（滤镜filter: Shadow）
HTML文字代码——阴影文字（滤镜filter:dropshadow）

HTML文字代码——渐变文字（滤镜filter:alpha）
HTML文字代码——模糊文字（滤镜filter:blur）
HTML文字代码——透明文字（滤镜filter:chroma）
HTML文字代码——反转文字（滤镜filter:Flip）
HTML文字代码——水波纹文字（滤镜filter:wave）

其中滤镜透明和模糊在这里不适用。

1、发光移动文字：

代码

代码一：

代码二：

示例

代码一示例：

启野博客

代码二示例：

启野博客

说明

居中属性：
<center>...</center>
发光滤镜：
...
移动代码：
<marquee direction=up behavior=alternate width=120 height=300>启</marquee>
<marquee direction=up behavior=alternate width=120 height=240>野</marquee>
<marquee direction=up behavior=alternate width=120 height=300>博</marquee>
<marquee direction=up behavior=alternate width=120 height=240>客</marquee>
加粗属性:
...
相关发光滤镜代码点击链接：
HTML文字代码——发光文字（滤镜filter: glow）

2、投射阴影移动文字

代码

示例

欢迎光临启野博客

说明

居中属性：
<center>...</center>
投射阴影滤镜：
...
移动代码：
原理同上，添加了文字独立的色彩...
加粗属性:
...
相关投射阴影滤镜代码点击链接：
HTML文字代码——投射阴影文字（滤镜filter: Shadow）

3、阴影移动文字：

代码

示例

当positive=0时

欢迎光临启野博客

当positive=1时

欢迎光临启野博客

说明

居中属性：
<center>...</center>
阴影滤镜：
...
移动代码：
原理同上，添加了文字独立的色彩...
加粗属性:
...
阴影的调节：offX=8,offY=8
相关阴影滤镜代码点击链接：
HTML文字代码——阴影文字（滤镜filter:dropshadow）

4、渐变移动文字：

代码

<center>

<marquee behavior="alternate">
<marquee width="150" direction=left>
欢迎光临启野博客
</marquee>
</marquee>

</center>

示例

欢迎光临启野博客

说明

居中属性：
<center>...</center>
渐变滤镜：
...
移动输入代码：
<marquee behavior="alternate">
<marquee width="150" direction=left>
欢迎光临启野博客
</marquee>
</marquee>
渐变的调节：opacity=20,finishopacity=100 数值互换调节渐变的方向
相关渐变滤镜代码点击链接：
HTML文字代码——渐变文字（滤镜filter:alpha）

5、反转移动文字：

代码

<marquee direction=up scrollAmount=2 height=50>
欢迎光临启野博客</marquee>
<marquee direction=down scrollAmount=2 height=50>
欢迎光临启野博客</marquee>

示例

欢迎光临启野博客

说明

居中属性：
...分别加载在两个移动代码中。
倾斜向上移动代码：
<marquee direction=up scrollAmount=2 height=50>
欢迎光临启野博客</marquee>
倾斜向下反转滤镜移动代码：
<marquee direction=down scrollAmount=2 height=50>
欢迎光临启野博客</marquee>
倾斜属性...
相关反转滤镜代码点击链接：
HTML文字代码——反转文字（滤镜filter:Flip）

6、水波纹移动文字：

代码

示例

欢迎光临启野博客

说明

字体设置：居中、大字体、颜色

欢
迎
光
临
启
野
博
客
水波纹移动代码：
<marquee style="filter: wave(add=0,freq=1,lightstrength=3,phase=1,strength=50)" scrollAmount=2 scrollDelay=65 direction=up behavior=alternate height=240>...</marquee>
相关水波纹滤镜代码点击链接：
HTML文字代码——水波纹文字（滤镜filter:wave）

7、多层多式复合移动：

代码

代码一：

代码二：

示例

效果一：

欢迎光临启野博客

效果二：

欢迎光临启野博客

说明

用表格控制真个画面，套接移动代码。

评论这张

转发至微博

阅读(2394)| 评论(0)

历史上的今天

this.p={ m:2,
 b:2,
 loftPermalink:'',
 id:'fks_094068086082089066087084082095083084084067083083082065',
 blogTitle:'HTML文字代码——移动文字（marquee标签移动文字与滤镜filter的结合）',
 blogAbstract:' <TABLE border=\"8\" cellSpacing=\"3\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\" align=\"center\" height=\"211\" \> <TBODY\> <TR\> <TD height=\"184\" vAlign=\"top\" \> <TABLE border=\"1\" cellSpacing=\"2\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\" align=\"center\" height=\"211\" \> <TBODY\> <TR\> <TD height=\"184\" vAlign=\"top\" \> <TABLE border=\"0\" width=\"100%\" \> <TBODY\> <TR\> <TD height=\"290\" background=\"http://img31.bimg.126.net/photo/l16DweXT0cnHH73Rk-QaNQ==/5711971702390492305.jpg\" width=\"500\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <DIV align=\"left\" \> </DIV\></BLOCKQUOTE\></BLOCKQUOTE\></BLOCKQUOTE\></BLOCKQUOTE\></BLOCKQUOTE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
 blogTag:'html',
 blogUrl:'blog/static/7250754220112611128521',
 isPublished:1,
 istop:false,
 type:2,
 modifyTime:1329409892294,
 publishTime:1300500692121,
 permalink:'blog/static/7250754220112611128521',
 commentCount:0,
 mainCommentCount:0,
 recommendCount:0,
 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:'B型天秤座',
 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/7250754220112611128521">${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 - 订阅此博客

启野的博客

导航

日志

HTML文字代码——移动文字（marquee标签移动文字与滤镜filter的结合）

历史上的今天

最近读者

热度

评论

页脚