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

一丝小雨盈盈而落......

对雨我有种莫名的喜欢,尤其是夜雨。无数个黄昏 ,雨伴着蔼蔼暮色飘然而至。

 
 
 

日志

 
 

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

2010-03-04 00:45:40|  分类: 【细雨资料】 |  标签: |举报 |字号 订阅

  下载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>默认情况是向左移动无限次,字幕高度是
                             文本高度,移动范围:水平移动的宽度是当前位
                             置的宽度,垂直移动的高度是当前位置的高度

 

                       博客制作、分割线、文字、FHASL集锦

装饰用的fhasl集锦

精品字体集萃

美丽的分隔线

漂亮的Flash时钟

漂亮的Flash时钟二

简单表格的制做

经典漂亮的播放器

颜色代码表

各种跳动的字代码

色彩艺术字代码

14款GIF制作软件

博客制作工具大全

花边、隔线【一】

花边、隔线【二】

教您安装音乐播放器

透明Fhasl素材【1】

透明Fhasl素材【2】

透明Fhasl素材【3】

挂式卷轴日志边框

博客音画常用代码集锦

漂亮的分隔线

浪漫的日记插图

边框背景素材【一】

如何装扮博客之家【一】

如何装扮博客之家【二】

古典背景素材【二】

人物小动漫

如何提高博客点击率

网上各类查寻一点通

背景素材【三】

电脑基础入门

博客竖排移动文字技巧及代码

 

0ne制作的文字特效移动代码 - 温柔细雨 - 一丝小雨盈盈而落......

  评论这张
 
阅读(2762)| 评论(77)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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