分享

动态文字特效代码

 戴氏地理记 2015-12-28

动态文字特效代码

编辑:仙灵子风水馆

☆动态文字特效代码 - 学 海 - XVE HAI BLOG仙灵子风水馆欢迎你!☆ 沒能一一回訪,請諒解! 记得留言哦!☆ 
        文字的动态特效处理与图片类似,都是 <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>
 示例二代码

 附  注

        1、各主要参数的含义:
        align:是设定活动对象(图片或文字)的位置;
        direction:用于设定活动对象的滚动方向是向左、向右、向上、向下;
        Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示由一端滚动到另一端;behavior="slide" 表示由一端滑动到另一端,且不再重复;behavior="alternate"表示在两端之间来回滚动。
        Height:用于设定滚动对象的高度;
        Width:则设定滚动对象的宽度;
        Hspace和vspace:分别用于设定滚动对象的左右边框和上下边框的宽度;
        Scrollamount:用于设定活动对象的滚动距离;数值越大滚动越快;
        scrolldelay:用于设定滚动两次之间的延迟时间,数值越大越有跳跃感;
        Loop:用于设定滚动的次数,不设置该值则为无限循环;
        <marquee>标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。
        2、代码使用方法:
        (1)放于博客主页:在编辑状态下,依次进入“装扮博客”、“设置首页内容”,选择“添加自定义模块”,将代码粘贴到模块中,合理设置后再保存即可。
        (2)放于日志中:在编辑状态下,进入写日志或编辑原有日志,依次点击“全部功能”、“<>”按钮,进入HTML代码编辑状态,将相关代码粘贴到合适位置,合理设置后再保存即可。

仙灵子风水馆动态文字特效代码


仙灵子风水


风水文化 易经文化

仙灵子风水

阴阳宅学 佛法道学
姓名测字 灵异档案 化煞改运 断卦案例
婚姻两性 养生健康 古典古籍 秘方良药
电脑手机 五花八门 人体艺术 音画欣赏

仙灵子风水论 仙灵子风水

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约