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

心灵驿站

天主爱世人,甚至将他的独生子赐给我们,叫一切信他的,不至灭亡,反得永生。

 
 
 

日志

 
 

制作移动文字的特效设定   

2013-01-05 21:29:01|  分类: 博客题材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

制作移动文字的特效设定 - 我心飞扬 - 心灵驿站

 

【制作移动文字的特效设定】

 

文字的动态特效处理与图片类似,都是 <marquee>这个参数在起作用。给<marquee>加上合适的属性,就能使文字产生各种动态效果,从而给人带来美的享受。

 
 
 
 
 
一、文字单向直线滚动
 
 
 
1.  代码格式 

<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,分别表示向左(默认可省略)、向右、向上、向下

 
 
 
 
 
 2.  效果示例

1、示例一文字左移本例代码
<DIV align=center>
<MARQUEE  scrollAmount=1   scrollDelay=60  style="FONT-SIZE: 30pt; WIDTH: 500px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 80px"><P align=center><FONT color=#f90b46>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

金钥匙欢迎您

 
 
 
 

3、示例二—文字右移本例代码
<DIV align=center>
<MARQUEE  scrollAmount=1   scrollDelay=60  direction=right   style="FONT-SIZE: 30pt; WIDTH: 500px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 80px"><P align=center><FONT color=#f90b46>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

金钥匙欢迎您

 
 
 
 
 

4、示例三—文字上移本例代码
<DIV align=center>
<MARQUEE  scrollAmount=1   scrollDelay=60  direction=up   style="FONT-SIZE: 30pt; WIDTH: 500px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 80px"><P align=center><FONT color=#f90b46>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

金钥匙欢迎您

 
 
 
 
 

5、示例三—文字下移本例代码
<DIV align=center>
<MARQUEE  scrollAmount=1   scrollDelay=60  direction=down   style="FONT-SIZE: 30pt; WIDTH: 500px; FILTER: shadow(color=#AF0530); LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 80px"><P align=center><FONT color=#f90b46>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

金钥匙欢迎您

 
 
 

根据上面的事例,可以制作出来以下的不同风格。

 
 

<CENTER>
<MARQUEE scrollAmount=1 scrollDelay=60   direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>金钥匙欢迎您</B></FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=1   scrollDelay=60  direction=up height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>金钥匙欢迎您</B></FONT></CENTER></MARQUEE></CENTER>
</CENTER>

金钥匙欢迎您
金钥匙欢迎您
 
 
 
 

<CENTER>
<MARQUEE scrollAmount=1 scrollDelay=60  direction=down   height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>金钥匙欢迎您</B></FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=1   scrollDelay=60  direction=down  height=60>
<CENTER><FONT face=华文彩云 color=#ff0000 size=6><B>金钥匙欢迎您</B></FONT></CENTER></MARQUEE></CENTER>
</CENTER>

金钥匙欢迎您
金钥匙欢迎您
 
 
 
 
 
 
 
二、文字倾斜滚动
 
 
1.  代码格式

 
<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。

 
 
 
2.  效果示例

1、示例一文字自左上向右下滚动本例代码
<DIV align=center>
<MARQUEE scrollAmount=2 scrollDelay=60   direction=right   style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: shadow(color=#333366,direction=240); LINE-HEIGHT: 15pt; FONT-FAMILY: 黑体; HEIGHT: 200px">
<DIV align=center>
<MARQUEE scrollAmount=2  scrollDelay=60   direction=down><FONT color=#3333ff><B>金钥匙欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV> 

金钥匙欢迎您
 
 
 
  3、示例二—文字自右上向左下滚动本例代码

<DIV align=center>
<MARQUEE  scrollAmount=2 scrollDelay=60  style="FONT-SIZE: 30pt; FILTER: glow(color=gray,strength=5); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文行楷; HEIGHT: 200px">
<DIV align=center>
<MARQUEE scrollAmount=2 scrollDelay=60 direction=down><FONT color=#ff0000><B>金钥匙欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV> 

金钥匙欢迎您

 
 
 4、示例三—文字自左下向右上滚动本例代码

<DIV align=center>
<MARQUEE  scrollAmount=2 scrollDelay=60 direction=right style="FONT-SIZE: 30pt; WIDTH: 400px; FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033); LINE-HEIGHT: 15pt; FONT-FAMILY: 华文新魏; HEIGHT: 200px">
<DIV align=center>
<MARQUEE scrollAmount=2 scrollDelay=60 direction=up><FONT color=#ff0000><B>金钥匙欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV> 

金钥匙欢迎您
 
 
 
  5、示例四—文字自右下向左上滚动本例代码

<DIV align=center>
<MARQUEE  scrollAmount=3 scrollDelay=60  style="FONT-SIZE: 30pt; FILTER: mask(color=#a09261) shadow(color=red,direction=135) chroma(color=#a09261); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文新魏; HEIGHT: 200px">
<DIV align=center>
<MARQUEE scrollAmount=3 scrollDelay=60 direction=up><FONT color=red><B>金钥匙欢迎您</B></FONT></MARQUEE></DIV></MARQUEE></DIV>

金钥匙欢迎您
 
 
 
 
 
三、文字反相滚动
 
 1.  代码格式

<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。

 
 
 
  2.  文字水平反相滚动

3、示例一文字自中间向左右两边滚动本例代码

<P align=center>
<MARQUEE   scrollAmount=3 scrollDelay=60  style="FONT-SIZE: 30pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px" scrollAmount=5><FONT color=#0000ff>金钥匙欢迎您</FONT></MARQUEE>
<MARQUEE  scrollAmount=3 scrollDelay=60 direction=right  style="FONT-SIZE: 30pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px"><FONT color=#0000ff>您迎欢匙钥金</FONT></MARQUEE></P> 

金钥匙欢迎您 您迎欢匙钥金

 
 
 
 

3、示例二—文字自左右两边向中间滚动本例代码
<P align=center>
<MARQUEE   scrollAmount=3 scrollDelay=60 direction=right style="FONT-SIZE: 30pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px" scrollAmount=5><FONT color=#0000ff>您迎欢匙钥金</FONT></MARQUEE>
<MARQUEE  scrollAmount=3 scrollDelay=60  style="FONT-SIZE: 30pt; WIDTH: 200px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 60px"><FONT color=#0000ff>金钥匙欢迎您</FONT></MARQUEE></P> 

您迎欢匙钥金 金钥匙欢迎您

 
 
 
 
 
 
(四)文字往复滚动
 
 
  1. 代码格式

<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。

 
 
 
 
 2、示例一——文字水平往复滚动(摆动)

<DIV align=center>
<MARQUEE style="FONT-SIZE: 30pt; FILTER: glow(color=#ff0000,strength=6); WIDTH: 500px; LINE-HEIGHT: 15pt; FONT-FAMILY: 华文行楷; HEIGHT: 50px" scrollAmount=5 direction=right behavior=alternate><P align=center><FONT color=#ffff00>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

 

金钥匙欢迎您

 
 
 
  3、示例二——文字垂直往复滚动(振动)

<DIV align=center>
<MARQUEE style="FONT-SIZE: 35pt; FILTER: shadow(color=#87CEFA, strength=50); WIDTH: 400px; LINE-HEIGHT: 15pt; FONT-FAMILY: 隶书; HEIGHT: 150px" scrollAmount=2 scrollDelay=60   direction=up behavior=alternate><P align=center><FONT color=#1e90ff>金钥匙欢迎您</FONT></P></MARQUEE></DIV>

金钥匙欢迎您

 
 
 
  4、示例三——文字交替跳跃

<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>

 

 
 
 
 5、示例四——带漂亮的模糊背景文字交替跳跃

<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>

 

 
 
6、示例五——文字交替跳跃消失

<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>

 

 
 
 
 
 
五、文字波浪式滚动
 
 
  1. 文字单向波浪式滚动

<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>

 

金钥匙欢迎您
 
 
2.  文字往复波浪式滚动

<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>

 

金钥匙博客
 
 
 
  3.  文字交替式游荡

<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>

 

 

 

 

 

1、各主要参数的含义:
align:是设定活动对象(图片或文字)的位置;
direction:用于设定活动对象的滚动方向是向左、向右、向上、向下;
Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示由一端滚动到另一端;behavior="slide" 表示由一端滑动到另一端,且不再重复;behavior="alternate"表示在两端之间来回滚动。
Height:用于设定滚动对象的高度;
Width:则设定滚动对象的宽度;
Hspace和vspace:分别用于设定滚动对象的左右边框和上下边框的宽度;
Scrollamount:用于设定活动对象的滚动距离;数值越大滚动越快;
scrolldelay:用于设定滚动两次之间的延迟时间,数值越大越有跳跃感;
Loop:用于设定滚动的次数,不设置该值则为无限循环;
<marquee>标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。


2、代码使用方法:
(1)放于博客主页:在编辑状态下,依次进入“装扮博客”、“设置首页内容”,选择“添加自定义模块”,将代码粘贴到模块中,合理设置后再保存即可。
(2)放于日志中:在编辑状态下,进入写日志或编辑原有日志,依次点击“全部功能”、“<>”按钮,进入HTML代码编辑状态,将相关代码粘贴到合适位置,合理设置后再保存即可。

↓ 请 点 击 进 入 ↓
文字的定义 移动的定义 文字代码基础

 

 

 

 

 

 

金钥匙欢迎朋友们光临!

金钥匙博客特此声明:
如果你喜欢此日志,请点击日志右下方的(推送或引用),或者左下方的(分享)。
让大家分享或引用,也算是对我的支持,谢谢!
※尊重他人劳动,崇尚网络公德。
本博作品欢迎收藏!支持转载!抵制抄袭!严禁剽窃!
引用日志及代码请保留原创字样!
※请朋友尊重朋友的劳动所成果,此筐架请你不要删,希望互相尊重!
如果你想得到别人的尊重,
那么你首先要学会怎样去尊重别人, 别人同样也会尊重你!

金钥匙再次声明:
不欢迎“复制者”--请文明上网。
您可以在网络找教程,素材,请别复制制作好的博文内容!
请别复制博文,复制专辑,修改专辑链接地址!
您复制--粘贴--也许需要几分钟,
可您知道编辑一篇教程需要多长时间吗?
可您知道编辑一篇图片“文章’需要多长时间吗?
您又知道制作“代码效果”一篇教程需要多长时间吗?
还是一句话:尊重他人劳动,崇尚网络公德。
严禁抄袭他人作品、严禁剽窃他人成果!
光看不留意见的,我将不视为博友!请文明上网!
金钥匙谢谢您的光临,并请留下宝贵意见!
感谢朋友 钥匙小语 博客禁忌 金钥匙的博客 博客现象 自我介绍 建博语感
开博心感 钥匙咀嚼 博友概念 钥匙玉言 关于版权 设计事项
关于钥匙 钥匙建议 金钥匙为你服务--问题专区 公告宣言 告知心语
坦荡的心 加友看法 人品有多美,空间就有多美 我的搏客 网聊必须
空间邀请 遇上网友 缘聚屏前 感谢朋友 逛博有感 博客随感
博友之歌 不宜交往 查看关于本博的更多信息 博客空间 致我网友

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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