常见网页文本特效代码汇总:变色文字特效和字符的背景特效
作者:一网学   最后更新时间:2014-04-19 14:50:57

常见网页文本特效代码汇总:变色文字特效和字符的背景特效


代码一:精彩的变色文字特效


<!--把如下代码加入<body>区域中-->


  <script language="JavaScript">






/* This script was made by Erik.  You can contact him me worfy@geocities.com or at my homepage www.geocities.com/Area51/Corridor/4090. I know that it doesn't look pretty in the source code, but that couldn't be helped.  Feel free to modify this script in any way but please give me credit.  This is my first real script.  


BTW  for you yankees, I spell colour with the U because I'm Canadain.*/






hexa = new MakeArray(16)


hexa[10] = "A"


hexa[11] = "B"


hexa[12] = "C"


hexa[13] = "D"


hexa[14] = "E"


hexa[15] = "F"




function MakeArray(n)


{


this.length = n


for (var i = 0; i <= n; i++)


this[i] = i


return this


}




function colours(text){




var posa = 0


var posb = 1


while (posa <= text.length){


var r = Math.floor(Math.random() * 15)


var rr= Math.floor(Math.random() * 15)


var g = Math.floor(Math.random() * 15)


var gg = Math.floor(Math.random() * 15)


var b = Math.floor(Math.random() * 15)


var bb = Math.floor(Math.random() * 15)


if (text.substring(posa,posb) == "<"){


var posaa = 0


posaa = posa


while (text.substring(posaa,posb) != ">"){


posaa++


posb++


}


document.write(text.substring(posa, posb))


posa = posb


posb = posa + 1


}


document.write("<font color=#"+hexa[r]+hexa[rr]+hexa[g]+hexa[gg]+hexa[b]+hexa[bb]+">")


document.write(text.substring(posa, posb)+"</font>")


posa++


posb++


}


}




</script>




  <script language = "javascript">




text = "This JavaScript shows every other letter of text as a different, random colour."


text +="You can also use any <blink> <font size=9> HTML </font> </blink> codes that you want"


text +=" As long as you don't use quotation marks and the commands have a space between them."


text +="  You can use any background colour or picture that you want, but black or white is sugeste"


text +="d <b> <u>HAVE FUN!!! </u> </b>"




colours(text)




</script>


代码二:字符的背景特效


<!--要完成此效果把如下代码加入到<body>区域中-->




<span id="theText" style="width:100%">


<h2 align="center"><font color="#ffffff">Welcome To You!!</font></h2>


</span><script>


var from = 5;


var to = 50;


var delay = 5;


var glowColor = "lime";


var i = to;


var j = 0;


textPulseDown();




function textPulseUp()


{


if (!document.all)


return


if (i < to)


{


theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";


i++;


theTimeout = setTimeout('textPulseUp()',delay);


return 0;


}




if (i = to)


{


theTimeout = setTimeout('textPulseDown()',delay);


return 0;


}






}




function textPulseDown()


{


if (!document.all)


return


if (i > from)


{


theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";


i--;


theTimeout = setTimeout('textPulseDown()',delay);


return 0;


}




if (i = from)


{


theTimeout = setTimeout('textPulseUp()',delay);


return 0;


}


}


</script>


上一篇:网页版面设计步骤和布局技巧指南

下一篇:HTML5代码学习:值得收藏的HTML5代码片段

其它免费教程

携程设计师教你如何提升客户体验!

时间:2015-08-28 点击:1794

以往,交互设计师的日常主要是配合产品功能需求,快速地绘制线框图,做原型demo,设计网站、手机上人机...

AI教程:如何绘制酷炫的张靓颖演唱会立体效果海报

时间:2016-01-22 点击:2675

小编:今天带来一篇简单易学的AI教程,手把手教你制作酷炫的立体字效果海报,原图是张靓颖2015演唱会...

交互设计工作中怎样判断优先级?【UI培训】

时间:2016-05-21 点击:1633

鸿影:在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想...

UI设计培训师教你如何应对“错误的”游戏UI设计

时间:2014-08-18 点击:2017

UI设计培训浅谈游戏UI设计师的基本工作流程与技能需求:当下正是游戏产业蓬勃发展的时期,相较于端游、...

配色教程!可视化信息图配色的3个技巧

时间:2015-11-30 点击:2111

小编:还在为找到不到合适的配色方案而烦恼?今天这篇文章用到的3个技巧助你轻松制作出好看的信息图。使配...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请