注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

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

 
 
 

日志

 
 

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>
<P style="font-size: 50pt; filter: glow(color=#FF0000 ,strength=50); width: 100%; color: #ffffff; line-height: 150%; font-family: 黑体">
<marquee direction=up behavior=alternate width=120 height=300><B>启</B></marquee>
<marquee direction=up behavior=alternate width=120 height=240><B>野</B></marquee>
<marquee direction=up behavior=alternate width=120 height=300><B>博</B></marquee>
<marquee direction=up behavior=alternate width=120 height=240><B>客</B></marquee>
</font></P>
</center>

 

代码二:

<center>
<P style="font-size: 50pt; filter: glow(color=#FF0000 ,strength=50); width: 100%; color: #000000; line-height: 150%; font-family: 黑体">
<marquee direction=up behavior=alternate width=120 height=300><B>启</B></marquee>
<marquee direction=up behavior=alternate width=120 height=240><B>野</B></marquee>
<marquee direction=up behavior=alternate width=120 height=300><B>博</B></marquee>
<marquee direction=up behavior=alternate width=120 height=240><B>客</B></marquee>
</font></P>
</center>

 

示例

代码一示例:

代码二示例:

说明

 
  • 居中属性:
    <center>...</center>
  • 发光滤镜:
    <P style="font-size: 50pt; filter: glow(color=#FF0000 ,strength=50); width: 100%; color: #000000; line-height: 150%; font-family: 黑体">...</font></P>
  • 移动代码:
    <marquee direction=up behavior=alternate width=120 height=300><B>启</B></marquee>
    <marquee direction=up behavior=alternate width=120 height=240><B>野</B></marquee>
    <marquee direction=up behavior=alternate width=120 height=300><B>博</B></marquee>
    <marquee direction=up behavior=alternate width=120 height=240><B>客</B></marquee>
  • 加粗属性:
    <B>...</B>
    相关发光滤镜代码点击链接:
    HTML文字代码——发光文字(滤镜filter: glow)

 

2、投射阴影移动文字

代码

 

<center>
<P style="font-size: 30pt; filter: shadow(color=#87CEFA ,strength=50); width: 100%; color: #1e90ff; line-height: 150%; font-family: 隶书">
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#1e90ff>欢</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#ffff00> 迎</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#a52a2a>光</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#008000>临</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#ffa500>启</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#ffa500>野</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#ffff00>博</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#008000>客</font></B></marquee>
</font></P>
</center>

 

示例

   

说明

 
  • 居中属性:
    <center>...</center>
  • 投射阴影滤镜:
    <P style="font-size: 30pt; filter: shadow(color=#87CEFA ,strength=50); width: 100%; color: #1e90ff; line-height: 150%; font-family: 隶书">...</font></P>
  • 移动代码:
    原理同上,添加了文字独立的色彩<font color=#1e90ff>...</font>
  • 加粗属性:
    <B>...</B>
  • 相关投射阴影滤镜代码点击链接:
    HTML文字代码——投射阴影文字(滤镜filter: Shadow)

 

3、阴影移动文字:

代码

 

<center>
<P style="font-size: 30pt; filter: dropshadow(color=#6699FF,offX=8,offY=8,,positive=0); color: #ffffff; font-family: 隶书; height:19pt">
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#1e90ff>欢</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#ffff00> 迎</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#a52a2a>光</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#008000>临</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#ffa500>启</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#ffa500>野</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=120><B><font color=#ffff00>博</font></B></marquee>
<marquee direction=up behavior=alternate width=60 height=80><B><font color=#008000>客</font></B></marquee>
</font></P>
</center>

 

示例

 
当positive=0时

 

当positive=1时

 
 
 

说明


  • 居中属性:
    <center>...</center>
  • 阴影滤镜:
    <P style="font-size: 30pt; filter: dropshadow(color=#6699FF,offX=8,offY=8,,positive=0); color: #ffffff; font-family: 隶书; height:19pt">...</font></P>
  • 移动代码:
    原理同上,添加了文字独立的色彩<font color=#1e90ff>...</font>
  • 加粗属性:
    <B>...</B>
  • 阴影的调节:offX=8,offY=8
  • 相关阴影滤镜代码点击链接:
    HTML文字代码——阴影文字(滤镜filter:dropshadow)

 

4、渐变移动文字:

代码

 

<center>
<P style="font-size: 30pt; filter:alpha(opacity=20,finishopacity=100,style=1,startx=0,starty=0,finishx=140,finishy=270); color:#ff0000; font-family: 隶书; height:19pt">
<marquee behavior="alternate">
<marquee width="150" direction=left>
欢迎光临启野博客
</marquee>
</marquee>
</font></P>
</center>

 

示例

 

欢迎光临启野博客


说明

 
  • 居中属性:
    <center>...</center>
  • 渐变滤镜:
    <P style="font-size: 30pt; filter:alpha(opacity=20,finishopacity=100,style=1,startx=0,starty=0,finishx=140,finishy=270); color:#ff0000; font-family: 隶书; height:40pt">...</font></P>
  • 移动输入代码:
    <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>
<P align=center style="font-size: 30pt; color:#ccffff; font-family: 隶书;height:40px"><em>欢迎光临启野博客</em></font></P></marquee>
<marquee direction=down scrollAmount=2 height=50>
<P align=center style="font-size: 30pt; Filter:Flipv; color:#008080; font-family: 隶书;height:40px"><em>欢迎光临启野博客</em></font></P></marquee>

 

示例

 

 

欢迎光临启野博客

欢迎光临启野博客

 

 

说明

 
  • 居中属性:
    <P align=center>...</P>分别加载在两个移动代码中。
  • 倾斜向上移动代码:
    <marquee direction=up scrollAmount=2 height=50>
    <P align=center style="font-size: 30pt; color:#ccffff; font-family: 隶书;height:20px"><em>欢迎光临启野博客</em></font></P></marquee>
  • 倾斜向下反转滤镜移动代码:
    <marquee direction=down scrollAmount=2 height=50>
    <P align=center style="font-size: 30pt; Filter:Flipv; color:#008080; font-family: 隶书;height:20px"><em>欢迎光临启野博客</em></font></P></marquee>
  • 倾斜属性<em>...</em>
  • 相关反转滤镜代码点击链接:
    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>
<P align=center style="font-size: 30pt">
<font color=#ff0000>欢</font>
<font color=#ff8900>迎</font>
<font color=#92c000>光</font>
<font color=#00c024>临</font>
<font color=#00c024>启</font>
<font color=#0053ff>野</font>
<font color=#4800ff>博</font>
<font color=#ff00ff>客</font>
</P></marquee>

 

示例

 

 

 

说明

 
  • 字体设置:居中、大字体、颜色
    <P align=center style="font-size: 30pt">
    <font color=#ff0000>欢</font>
    <font color=#ff8900>迎</font>
    <font color=#92c000>光</font>
    <font color=#00c024>临</font>
    <font color=#00c024>启</font>
    <font color=#0053ff>野</font>
    <font color=#4800ff>博</font>
    <font color=#ff00ff>客</font>
    </P>
  • 水波纹移动代码:
    <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、多层多式复合移动:

代码

 

代码一:


<TABLE bgColor=#000000>
<TBODY>
<TR>
<TD vAlign=top width=1>
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=120>
<MARQUEE scrollAmount=4 direction=right behavior=alternate width=288><font color=#ff0000>欢</font>
<font color=#ff8900>迎</font>
<font color=#92c000>光</font>
<font color=#00c024>临</font>
<font color=#00c024>启</font>
<font color=#0053ff>野</font>
<font color=#4800ff>博</font>
<font color=#ff00ff>客</font></MARQUEE></MARQUEE></TD>
<TD width=288>
<MARQUEE style="FILTER: wave(add=1,phase=4, freq=1,strength=50)" scrollAmount=2 scrollDelay=65 direction=up behavior=alternate width=288 height=120>
<CENTER><font color=#ff0000>欢</font>
<font color=#ff8900>迎</font>
<font color=#92c000>光</font>
<font color=#00c024>临</font>
<font color=#00c024>启</font>
<font color=#0053ff>野</font>
<font color=#4800ff>博</font>
<font color=#ff00ff>客</font></CENTER></MARQUEE></TD></TR></TBODY></TABLE>

 

代码二:


<DIV align=center>
<TABLE align=center bgColor=#000000>
<TBODY>
<TR>
<TD vAlign=top width=1>
<MARQUEE scrollAmount=1 direction=down behavior=alternate height=150>
<MARQUEE scrollAmount=4 direction=right behavior=alternate width=450>
<FONT color=#ff0000 size=6 face=华文新魏>欢</FONT>
<FONT color=#ff8900 size=6 face=华文新魏>迎</FONT>
<FONT color=#92c000 size=6 face=华文新魏>光</FONT>
<FONT color=#00c024 size=6 face=华文新魏>临</FONT>
<FONT color=#00c0da size=6 face=华文新魏>启</FONT>
<FONT color=#0053ff size=6 face=华文新魏>野</FONT>
<FONT color=#4800ff size=6 face=华文新魏>博</FONT>
<FONT color=#ff00ff size=6 face=华文新魏>客</FONT>
</MARQUEE></MARQUEE></TD>
<TD width=450>
<MARQUEE style="FILTER: wave(add=1,phase=4, freq=1,strength=50)" scrollAmount=2 scrollDelay=65 direction=up behavior=alternate width=450 height=150>
<CENTER>
<FONT color=#ff0000 size=6 face=华文新魏>欢</FONT>
<FONT color=#ff8900 size=6 face=华文新魏>迎</FONT>
<FONT color=#92c000 size=6 face=华文新魏>光</FONT>
<FONT color=#00c024 size=6 face=华文新魏>临</FONT>
<FONT color=#00c0da size=6 face=华文新魏>启</FONT>
<FONT color=#0053ff size=6 face=华文新魏>野</FONT>
<FONT color=#4800ff size=6 face=华文新魏>博</FONT>
<FONT color=#ff00ff size=6 face=华文新魏>客</FONT>
</CENTER></MARQUEE></TD></TR></TBODY></TABLE></DIV>

 

示例

 

效果一:

 

 

 

效果二:

 

 

 

说明

  

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

 

  评论这张
 
阅读(1668)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017