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

沧海的博客

人生如棋 落子不悔

 
 
 

日志

 
 

文字特效的源代码之一  

2010-06-09 14:01:07|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自天涯浪子《字体特效的源代码之一》

文字特效的源代码之一

引用  天涯浪子字体特效的源代码之一   婉儿字体特效的源代码之一

1,文章首字下沉特效:

<DIV style="FONT-SIZE: 12px; LINE-HEIGHT: 14px"><SPAN style="FONT-SIZE: 24px; LINE-HEIGHT: 28px; FLOAT: left;"><B>这</B></SPAN>请在此填写文字内容,然后看效果</DIV>

2,文章上下滚动的特效:

<MARQUEE scrollAmount=2 scrollDelay=200 direction=up width="100%"

height=210><FONT style="LINE-HEIGHT: 180%; LETTER-SPACING: 3px"

color=#ffffff>写上所要写的字</FONT></MARQUEE>

3,做比较大字的代码:

<FONT color=#09f7f7 size=7><STRONG><SUP><FONT color=#99ff00>ゞ要写的字

ゞ</FONT></SUP></FONT>

4,文字走马灯效果的代码:

<marquee width="157" height="21">这里输入文字

5,能改变文字字体和颜色的代码1:

<b><font face=华文行楷 size=5 color=#ff0000>要修改字体和颜色的字

提示:color=文字颜色

6,能改变文字字体和颜色的代码2:

<FONT face=楷体_GB2312(字体) color=#0000ff(字体颜色) size=1>輸入文字</FONT>

提示:color=文字颜色

7,移动文字的代码:

<marquee width="157" height="21">你要写的文字</marquee>

8,文字特效显示的代码:

效果一:

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black);

FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临</B></FONT></CENTER>

效果二:

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black);

FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临</B></FONT></CENTER>

效果三:

<CENTER><FONT color=#0099ff style="FILTER: blur(add=1,

direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; LINE-HEIGHT: 150%; WIDTH: 450px">欢迎光临</FONT></CENTER>

效果四:

<MARQUEE behavior=alternate direction=up height=150

scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=460 <IMG src="http://www.east128.com/bbs/UploadFile/2003-9/20039251018214901.gif"><FONT color=red face=楷体_gb2312 size=7>欢迎光临</FONT></MARQUEE></MARQUE></MARQUEE>

效果五:

<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=240>

欢迎光临</FONT></MARQUEE><FONT color=#0000ff face=隶书size=7><MARQUEE

direction=right height=50 width=240>欢迎光临</MARQUEE></FONT></FONT>

9,文字上下左右移动特效的代码:

<marquee direction=移动方向 scrollamount=移动速度数值>插入文字</marquee>

提示:direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

10,文字停停走走效果的代码:

<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>

11,文字移动效果的代码:

<marquee behavior=移动效果>插入文字</marquee>

说明:behavior=scroll 一圈一圈绕着走;    behavior=slide 只走一次;     behavior=alternate 来回走

12,发光文字的代码:

</textarea><table style="FILTER: glow(color=#6699FF,direction=2)">

<font color=#ffffff size=2>要填写的文字</font></table>

提示:color是阴影的颜色,可以配合网页色调改变;   direction是设置阴影的强度;   font color是原字体的颜色

13,浮雕效果文字的代码:

</textarea><table style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1);"><font color=#ffffff>要填写的文字</font></table>

提示:color是阴影的颜色,可以配合网页色调改变;   positive是设置阴影的强度;   offx和offy是设置的阴影和文字的距离;   color是原字体的颜色

14,阴影文字的代码:

</textarea><table style="FILTER: dropshadow(color=#cccccc, offx=2, offy=2, positive=2);">

<font color=#6CABE7 size=2>要填写的文字</font></table>

15,文本框字体的代码:

<DIV><TEXTAREA style="FONT: 12px ;font-family:Verdana;color:#666666; WIDTH: 490px; HEIGHT: 271px" rows=152 cols=612>要填写的文字</DIV></TEXTAREA></DIV>

提示:字体(font-family)还可以选用Arial,Tahoma等等;   color可自行设定<tr> 表格列 border="5"边框宽度为5像素;   bordercolor="Purple"边框顔色为紫色<td> 表格栏 bgcolor="Green"表格背景顔色为绿色

16,滚动字的代码:

<marquee border="0" align="middle" scrolldelay="120">要填写的文字</marquee>

17,从右侧进来字和图片的代码:

<DIV><TABLE cellSpacing=10 cellPadding=0 width="100%"

border=0><TBODY><TR><TD vAlign=top width="100%"><DIV align=center>

<MARQUEE scrollDelay=99 width="100%" height=108 border="0"><IMG

src="http://www.smba-china.com/upload/upfile/2004430154320.gif"><FONT

color=#b990f7><FONT face=华文行楷 color=#4d4dff size=7><B>欢迎您</B><IMG src="http://www.smbachina.com/upload/upfile/2004430154320.gif"></FONT></FO

NT></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV><DIV>

<TABLE cellSpacing=10 cellPadding=0 width="100%" border=0><TBODY><TR>

<TD vAlign=top width="100%" height=118>

<DIV align=center><MARQUEE scrollDelay=99 width="100%" height=108 border="0"><IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"><FONT

color=#b990f7><FONT face=华文行楷 color=#4d4dff size=7><B>欢迎您</B><IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"></FONT></FO

NT></MARQUEE></DIV></TD></TR></TBODY></TABLE></DIV>

18,倒帖文字特效的代码:

<p align=right><FONT style="FONT-SIZE:50pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>欢迎您</B></FONT></p>

19,翻转文字特效的代码:

<FONT style="FONT-SIZE:50pt;filter:FlipV(color=silver);WIDTH:100%;

COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>欢迎您</B></FONT>

20,漂动文字特效的代码1:

<table align=center border=3 bordercolor="#CD5C5C" width=450 height=350><td background=http://bbs.yunbbs.com/uploadFile/2004-12/20041210163350528.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=1.gif><font color=red size=6><b>欢迎您</b><img src=1.gif></font></marquee></table><br>

21,漂动文字特效的代码2:

<P align=center><MARQUEE scrollAmount=12 direction=center behavior=alternate>

<MARQUEE direction=up behavior=alternate width=400 height=400>

<P align=center><IMG src="http://members12.tsukaeru.net/rose/0sozai/2cut/ico/50-01/s012.gif"><IMG src="http://www.cjhz.com/bbs/UploadFile/2004-10/20041016182848353.jpg"><IMG src="http://members12.tsukaeru.net/rose/0sozai/2cut/ico/50-01/s012.gif"></P><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=000000); WIDTH: 160%; COLOR: #4d4dff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">欢迎您</FONT></MARQUEE></MARQUEE></P>

22,滚动文字特效的代码:

<marquee width="200" height="100" direction="right" behavior="alternate" scrollamount="6" scrolldelay="88">欢迎您</marquee>

提示说明:scrollAmount 它表示速度,数值越大速度越快,如果没有它,默认为6,建议设为1—3比较好;width和height 表示滚动区域的大小;   width是宽度,height是高度,特别是在做垂直滚动的时候,一定要设height的值;   direction 表示滚动的方向,默认为从右向左:←,可选的值有right、down、up,滚动方向分别为:right表示→→,up表示↑,down表示↓;    scrollDelay 这也是用来控制速度的,默认为90,值越大,速度越慢,通常scrollDelay是不需要设置的;    behavior用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动),slide(幻灯片效果,指的是滚动一次,然后停止滚动;

23,改变滚动字幕颜色的代码:

<marquee scrollAmount=2 width=300><a style=color:CC6600>欢迎您</a></marquee>

24,当鼠标停留在文字上,文字停止滚动的代码:

<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>欢迎您</marquee>

25,文字交替效果特效的代码:

<marquee scrollAmount=2 width=150 behavior=alternate>欢迎光临/marquee>

26,多行文本向上滚动特效的代码:

<marquee scrollAmount=2 width=300 height=50 direction=up>·欢迎光临<br>·百度空间 <br><a href=http://www.hack58.com>交朋会友</a></marquee>

27,不停变化颜色的字的代码:

<DIV id=texture style="WIDTH: 460px; HEIGHT:30px"><IMG height=2

src="/web/ewebeditor/UploadFile/2005101692624157.gif" width=460px

align=right><IMG height=30px src="/web/ewebeditor/UploadFile/2005101692625359.gif" width=446.2px

align=right><DIV style="FONT-SIZE: 20px; FILTER: Chroma(color=#FCFBFA);

FLOAT: left; WIDTH: 460px; HEIGHT:30px; BACKGROUND-COLOR:#000000"

align=center><FONT color=#FCFBFA>欢迎光临</FONT></DIV></DIV>

28,带框文字特效的代码:

<font color=#02B452 style="border-color=#FF0000;border-top-style:outset;border-bottom-style:outset;border-right-style:outset;border-left-style:outset">写上你要写的字</font>

提示:以下这些符号是边框类型(修改代码中可修改,不过建议上下左右边框用同一种效果)

double 表示边框样式为:双线;     groove 表示边框样式为:3D凹槽状

dotted 表示边框样式为:点线;     inset 表示边框样式为:3D内嵌边框

outset 表示边框样式为:3D外嵌边框;     ridge 表示边框样式为:3D凸脊状

dashed 表示边框样式为:虚线;     solid 表示边框样式为:实线

29,滚动红色字特效的代码:

<marquee width="650" height="60"><font color="red">欢迎光临</font></a></marquee>

30,滚动无框红色字特效的代码:

<div id="layer25" style="padding:0px; LEFT: 2px; OVERFLOW: hidden; WIDTH: 634px; POSITION: absolute; TOP: 0px; HEIGHT: 530px; zindex: 90" resiziable="true"><marquee width="750" height="60"><font color="red">欢迎光临</font></a></marquee>

31,左右移动字特效的代码:

<font colo*=#855558><center><marquee behavior="alternate"

scrollamount="2">欢迎光临</marquee></marquee></font></center>

32,角度跳动的字左右移动字的特效代码:

<marquee behavior="alternate" direction="up" height="80" width="60%" scrollamount="2" scrolldelay="0"><marquee behavior="alternate" scrollamount="3">欢迎光临</marquee></marquee>

33,七字体顔色文字特效的代码:

<font COLOR=颜色代码>文字</font>

34,修改导航,但还是原来的格式,只是改变字体和背景的代码:

<img src="/blog/javascript:bt_1.innerText="导航文字;';bt_2.innerText='导航文字';bt_3.innerText='导航文字';bt_4.innerText='导航文字';bt_5.innerText='导航文字';bt_6.innerText='导航文字';bt_7.innerText='导航文字';bt_8.innerText='导航文字';">在加上透明效果:<img

src="/blog/javascript:bt_1.style.background="url()';bt_2.style.background='

url()';bt_3.style.background='url()';bt_4.style.background='url()';bt_5.sty

le.background='url()';bt_6.style.background='url()';bt_7.style.background='

url()';bt_8.style.background='url()';"></img>

再加上颜色效果:

<img src="javascript:document.getElementById('bt_1').style.color='#D9D919';document.getElementById('bt_2').style.color='#FF00FF';document.getElementById('b

t_3').style.color='#FFFFFF';document.getElementById('bt_4').style.color='#33ff00';document.getElementById('bt_5').style.color='#FF7F00';document.getEl

ementById('bt_6').style.color='#FF0000';document.getElementById('bt_7').style.color='#00ffff';document.getElementById('bt_8').style.color='#77aaff';">

</img><font color=red></font>

代码使用方法:

1,把你想写的文字(或文章)粘贴在上面你选中的任何一组代码中原有的文字上——点击发表文章——勾选“显示源代码”——把代码复制粘贴在框中的代码后面——去掉勾——就可以看到你的文章效果了——然后点击发表文章就行了;

2,如果你想在文章上粘贴背景图片,那你就要在“去掉勾”后不要马上点击发表文章,而是重新勾选“显示源代码”,把已贴好图片地址的以下这组代码:   <div style='background:url(图片地址);'>   复制粘贴在框内所有代码之前,去掉勾,点击发表文章,就OK了;

3,   反之,你想在图片上写上不同类形的文字,也可按这个办法操作;

 

文字特效的源代码之一 - 沧海 - 沧海的博客

文字特效的源代码之一 - 沧海 - 沧海的博客

文字特效的源代码之一 - 沧海 - 沧海的博客

  评论这张
 
阅读(397)| 评论(4)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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