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

美好宁静之光

美好的回忆从这里开始......

 
 
 

日志

 
 

0ne制作的文字特效移动代码  

2010-03-04 06:45:46|  分类: 移动字制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


 


一、从右向左移

 代码 

<marquee><div style="font-size: 60pt; filter: shadow(color=green, strength=120); width: 100%"><p><font face=华文彩云 color=#fff000>需要移动的文字</font></p><p>&nbsp;</p></div></marquee>

试例效果:


     从  右  向  左  移

 

二、从左向右移

 代码 

<marquee direction=right><div style="font-size: 60pt; filter: shadow(color=green, strength=120); width: 100%"><p><font face=华文彩云 color=#fff000>需要移动的文字</font></p><p>&nbsp;</p></div></marquee>

试例效果:


     从  左  向  右  移

 

三、一圈一圈绕着移动

 代码 

<marquee><div style="font-size: 80pt; filter: progid:DXImageTransform.Microsoft.engrave(bias=0.5); font-family: 华文行楷; height: 1px; background-color: red"><p align=center>需要移动的文字</p></div></marquee>

 
试例效果:

一圈一圈绕着移动

四、只移动三次就停了

 

 代码 

<marquee behavior=slide loop=3><div style="font-size: 80pt; filter: progid:DXImageTransform.Microsoft.emboss(bias=0.5); font-family: 华文行楷; height: 1px; background-color: red"><p align=center>需要移动的文字</p></div></marquee>

 
试例效果:
vior=slide loop=3>

只移动三次就停了

五、移一步,停一停

 

 代码 

<marquee scrollAmount=100 scrollDelay=500><div style="display: block; font-size: 80pt; filter: progid:DXImageTransform.Microsoft.wave(Strength=3); width: 150%; color:gold; font-family: impact; height: 1px"><p align=center><font color=#fff000><b></font>需要移动的文字</b></p></div></marquee>

 
试例效果:

移一步,停一停

六、左右来回移动

 

 代码 

<marquee behavior=alternate><div style="font-size: 60pt; filter: shadow(color=ff00ff, strength=20); width: 80%"><font face=华文彩云 color=#ffffff>需要移动的文字</font></div></marquee>

 
试例效果:
左右移动

七、移动遮罩

 

 代码 

<marquee behavior=alternate><marquee direction=right width=560><div style="font-size: 60pt; filter: shadow(color=lawngreen, strength=10); width: 580px"><font face=华文彩云 color=inen>需要移动的文字</font></div></marquee></marquee>

 
试例效果:
移动遮罩

八、从下向上移动

 

 代码 

<marquee direction=up width=436 height=200><div style="filter: shadow(color=#0000FF, strength=10); width: 520px"><font style="font-weight: normal; font-size: 40pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#FF9900>需要移动的文字</font></div></marquee>

 
试例效果:
从下向上移动

九 、从上向下移动

 代码 

<marquee direction=down height=200><div style="filter: shadow(color=#FF3333, strength=10); width: 520px"><font style="font-weight: normal; font-size: 40pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#FF0099>需要移动的文字</font></div></marquee>

 
试例效果:
从上向下移动

十、垂直往复移动

 

 代码 

<marquee direction=up behavior=alternate><div align="center"><span style="display: block; font-size: 60pt; filter: glow(color=red,strength=15); color: gold; height: 32px; text-align: center">需要移动的文字</span></div></marquee>

 
 
试例效果:
垂直往复移动

十一、从左上向右下移动

 代码 

<marquee direction=right><div align=center><marquee width=100% direction=down><div style="font-size: 80pt; filter: shadow(color:gold, strength=20); width: 100%"><font face=华文彩云 color=yellow>需要移动的文字</font></div></marquee>

试例效果:
从左上向右下移动

十二、 从右上向左下移动

 代码 

<marquee direction=left><div align=center><marquee width=100% direction=down><div style="font-size: 80pt; filter: shadow(color:green, strength=20); width: 100%"><font face=华文彩云 color=yellow>需要移动的文字</font></div></marquee>

试例效果:
从右上向左下移动

十三、从左下向右上移动

 代码 

<marquee direction=right><div align=center><marquee width=100% direction=up><div style="font-size: 80pt; filter: shadow(color:blue, strength=20); width: 100%"><font face=华文彩云 color=#33ffcc>需要移动的文字</font></div></marquee>

试例效果:
从左下向右上移动

十四、从右下向左上移动

 代码 

<marquee direction=left><div align=center><marquee width=100% direction=up><div style="font-size: 80pt; filter: shadow(color:blue, strength=20); width: 100%"><font face=华文彩云 color=#33ffcc>需要移动的文字</font></div></marquee>

试例效果:
从右下向左上移动

十五、中间水平向左右移动

 代码 

<p align=center> <marquee width=48%"><div style="filter: shadow(color=#009999, strength=10); width: 480px"><font style="font-weight: normal; font-size: 50pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#00ff00>需要移动的文字</font></div></marquee><marquee width=48% direction=right><div style="filter: shadow(color=#009999, strength=10); width: 480px"><font style="font-weight: normal; font-size: 50pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#00ff00>字文的动移要需</font></div></marquee></p>

试例效果:

中间向两边移动
动移边两向间中

十六、左右水平向中间移动

 代码 

<p align=center> <marquee width=48% direction=right><div style="filter: shadow(color=#FFFF00, strength=10); width: 480px"><font style="font-weight: normal; font-size: 50pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#ffffff>需要移动的文字</font></div></marquee><marquee width=48% direction=left><div style="filter: shadow(color=#FFFF00, strength=10); width: 480px"><font style="font-weight: normal; font-size: 50pt; line-height: normal; font-style: normal; font-variant: normal" face=华文彩云 color=#ffffff>字文的动移要需</font></div></marquee></p>

试例效果:

两边向中间移动
动移间中向边两

十七、左右水平向中间来回移动

 代码 

<marquee behavior=alternate direction=left scrollAmount=3 width=48%><font style="font-size:40pt;" face=华文彩云 color=#00ff00>需要移动的文字<font face=webdings>4</font></marquee><marquee behavior=alternate direction=right scrollAmount=3 width=48%><font style="font-size:40pt;" face=华文彩云 color=#00ff00><font face=webdings>3</font>需要移动的文字</font></marquee>

试例效果:
两边向中间来回移动4 3动移回来间中向边两

十八、从上下向中间移动

 代码 

<center> <marquee scrollAmount=2 direction=down width="80%" height=100> <table style="filter: glow(color=#00ccff,direction=1)"><font style="font-size: 60pt; font-family: 华文行楷" color=#00ff00>需要移动的文字</font> <tbody></tbody></table></marquee> <center> <marquee scrollAmount=2 direction=up width="80%" height=100> <table style="filter: glow(color=#00ccff,direction=1)"><font style="font-size: 60pt; font-family: 华文行楷" color=#00ff00>需要移动的文字</font> <tbody></tbody></table></marquee></center></center>

试例效果:
向中间移动
向中间移动

十九、从中间向上下移动

 代码 

<center><marquee width=80% direction=up scrollAmount=2 height=100><table style="filter: glow(color=#ff66cc,direction=1)"><font style="font-size:60pt; font-family: 华文行楷" color=#ff99ff>需要移动的文字</font></marquee><center><marquee width=80% direction=down scrollAmount=2 height=100><table style="filter: glow(color=#ff66cc,direction=1)"><font style="font-size:60pt; font-family: 华文行楷" color=#ff99ff>需要移动的文字</font></marquee></center>

试例效果:
中间向上下
中间向上下

二十、上下向中间来回移动

 代码 

<marquee scrollAmount=2 direction=down behavior=alternate height=100><div align=center><font style="font-size:40pt;" face=华文彩云 color=#00ff00>需要移动的文字</div></marquee><marquee scrollAmount=2 direction=up behavior=alternate height=100><div align=center><font style="font-size:40pt;" face=华文彩云 color=#00ff00>需要移动的文字</div></marquee>

试例效果:
上下向中间来回移动
上下向中间来回移动

二十一、上下交替移动

 代码 

<center><div style="font-size: 40pt; filter: glow(color: #FF00FF,strength=60); width: 1000px; color: #ffffff; line-height: 150%; font-family: 华文彩云"><marquee direction=up behavior=alternate width=120 height=320><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=320><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=320><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=320><center><b>字</b></center></marquee></div></center>

试例效果:

二十二、移动后消失

 代码 

<center><div style="font-size: 40pt; filter: glow(color:#00cc00,strength=60); width: 1000px; color: #ECF5FF; line-height: 150%; font-family: 华文彩云"><marquee style="width:700px; height:320px" scrollAmount=5 direction=up><marquee direction=up behavior=alternate width=100 height=320><center><b>需</b></center></marquee><marquee direction=up behavior=alternate width=100 height=280>
<center><b>要</b></center></marquee><marquee direction=up behavior=alternate width=100 height=320><center><b>移</b></center></marquee><marquee direction=up behavior=alternate width=100 height=280><center><b>动</b></center></marquee><marquee direction=up behavior=alternate width=100 height=320><center><b>的</b></center></marquee><marquee direction=up behavior=alternate width=100 height=280><center><b>文</b></center></marquee><marquee direction=up behavior=alternate width=100 height=320><center><b>字</b></center></marquee></marquee></div></center>

试例效果:

二十三、波浪式移动

 代码 

<marquee style="font-size:40pt; filter: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); font-family: 华文彩云; height: 200px" scrollAmount=5 direction=up behavior=alternate><div align=center><marquee scrollAmount=3 behavior=altrnate width=520><div align=center><font color=#FFFF00>需要移动的文字</font></div></marquee>

试例效果:
波 浪 式 移 动

二十四、往复波浪式移动

 代码 

<marquee direction="up" behavior="alternate" scrollamount=4 height="200"><marquee direction="right" scrollamount=3 behavior="alternate" width=80%><font style="font-size: 40pt" face=华文新魏 color=#009999>需要移动的文字</font></marquee>

试例效果:
往复波浪式

二十五、交替往复波浪式移动

 代码 

<marquee direction="up" behavior="alternate" scrollamount=4 height="200"><marquee direction="right" scrollamount=3 behavior="alternate" width=80%><font style="font-size: 28pt" face=华文行楷 color=red><marquee direction=up behavior=alternate width=80 height=200>需</marquee><marquee direction=up behavior=alternate width=80 height=150>要</marquee><marquee direction=up behavior=alternate width=80 height=200>移</marquee><marquee direction=up behavior=alternate width=80 height=150>动</marquee><marquee direction=up behavior=alternate width=80 height=200>的</marquee><marquee direction=up behavior=alternate width=80 height=150>文</marquee><marquee direction=up behavior=alternate width=80 height=200>字</marquee></font></marquee>

试例效果:

二十六、S型移动

 代码 

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=200 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=50)"><font style="font-size: 60pt" face=黒体 color=gold><center>需要移动的文字</center></font></marquee>

试例效果:
S型移动

二十七、 多层多式复合移动

 代码 

<table> <tr><td width="1" valign="top" > <marquee direction="up" behavior="alternate" scrollamount=1 height="300"> <marquee direction="right" scrollamount=8 behavior="alternate" width="800"><font style="font-size: 40pt" face=华文行楷 color=0000ff>需要移动的文字</font></marquee> </marquee> </td> <td width="800"> <marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height="300" width="800" style="Text-align;filter:wave(add=1,phase=4, freq=1,strength=300)"><font style="font-size: 40pt" face=黒体 color=ffff00><center>需要移动的文字</center></font></marquee></td></tr></table>

试例效果:
弹珠式移动
S型、上下移动

二十八、背景图片文字竖排渐出移动

 代码 

<table height=200 cellSpacing=0 bordercolorDark=#aab8ee cellPadding=0 width=180 align=center bordercolorLight=#aab8ee background=http://img.blog.163.com/photo/UCW-9f5uuSSPzepbsvmpmw==/2044071280874090109.jpg border=1><tbody><tr><td><div align=center><marquee scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=290 height=200><marquee style="line-height: 100%; writing-mode: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=290 height=200><p align=center><font style="font-size: 15pt; filter: width: 100%; color: #ff0000; line-height: 100%; font-family:华文新魏">需要移动的字文<br>.<br>.<br>.<br>·需·<br>·要·<br>·移·<br>·动·<br>·的·<br>·文·<br>·字·<br>.<br>.<br>.</p></marquee></marquee></div></td> </tr></tbody></table>

试例效果:
vior=slide loop=1 width=290 height=200>

历史的天空

暗淡了刀光剑影
远去了鼓角铮鸣
眼前飞扬着一个个
鲜活的面容

湮没了黄尘古道
荒芜了烽火边城
岁月啊你带不走
那一串串熟悉的姓名

兴亡谁人定啊
盛衰岂无凭啊
一页风云散啊
变幻了时空

聚散皆是缘哪
离合总关情啊
担当生前事啊
何计身后评

长江有意化作泪
长江有情起歌声
历史的天空闪烁几颗星
人间一股英雄气
在驰骋纵横

二十九、文字穿梭移动

 代码 

<table style="filter: dropshadow(color=#af2dco, offx=3, offy=3, positive=1)"><font style="font-size:40pt;"face=华文行楷 color=#730404><marquee scrollAmount=2 width=60 height=20>文&nbsp;&nbsp;&nbsp;&nbsp;文</marquee>&nbsp;&nbsp;&nbsp;&nbsp;<marquee scrollAmount=2 width=60 height=20>字&nbsp;&nbsp;&nbsp;&nbsp;字</marquee>&nbsp;&nbsp;&nbsp;&nbsp;<marquee scrollAmount=2 width=60 height=20>穿&nbsp;&nbsp;&nbsp;&nbsp;穿</marquee>&nbsp;&nbsp;&nbsp;&nbsp;<marquee scrollAmount=2 width=60 height=20>梭&nbsp;&nbsp;&nbsp;&nbsp;梭</marquee></font></table>

试例效果:
文   文    字   字    穿   穿    梭   梭


附  注

           各主要参数的含义:
           align:是设定活动对象(图片或文字)的位置。
           direction:用于设定活动对象的移动方向。
           behavior="scroll"表示由一端移动到另一端。
           behavior="alternate"表示在两端之间来回移动。
           height:用于设定移动对象的高度。
           width:则设定移动对象的宽度。
           hspace:用于设定移动对象的左右边框宽度。
           loop:用于设定移动的次数,不设置该值则为无限循环
           style="font-size: "用于设定文字大小。
           wline-htight: 用于设定文字行间距。
           font-family: 用于设定字体。
           color: 用于设定颜色。
           positive设置浮雕、阴影等对象的强度。
           top:设置偏移属性。
           z-index:设置层叠定位属性
           vspace:上下边框的宽度。
           behavior="slide"表示由一端移动到另一端,且不再
                                    重复。
           scrollamount:用于设定活动对象的移动距离,数值大
                                   越移动越快。
           scrolldelay:用于设定移动两次之间的延迟时间,数
                               值越大越有跳跃感。
           <marquee>默认情况是向左移动无限次,字幕高度是
                             文本高度,移动范围:水平移动的宽度是当前位
                             置的宽度,垂直移动的高度是当前位置的高度

 

               集锦

 

使

0ne制作的文字特效移动代码 ......

 

 

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

历史上的今天

评论

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

页脚

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