如题,这是一个简单的 css + div + javascript 实现的文字色彩渐变效果。
点击查看:demo | 右键另存下载, 或拷贝以下代码
下面是 css 部分代码:
body{ font:12px/1.5 microsoft yahei;}h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 microsoft yahei; text-align:center;}.box{ position:relative; background-color:#fff; width:auto; margin:0 auto; padding:0 30px; font:700 20px/1.5 microsoft yahei,microsoft yahei; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; height:30px; margin-top:8px;}.box a{ position:absolute; font-style:normal; white-space:nowrap;}.f999{ color:#999;}
下面是 div 部分代码:
css多彩渐变字
文字:
r值: rgb颜色中的r值(0-255)
g值: rgb颜色中的g值(0-255)
b值: rgb颜色中的b值(0-255)
渐变方式: 灰度渐变变化r值变化g值变化b值 相应的数值会强制在0~255之间变化
ok,上色!
以下是 javascript 部分代码:
// javascript代码开始var rs = document.getelementbyid(rvalue);var gs = document.getelementbyid(gvalue);var bs = document.getelementbyid(bvalue);function init(){ var str; for(var i=0;i<=255;i++){ var opr = document.createelement(option); var opg = document.createelement(option); var opb = document.createelement(option); opr.innerhtml = i; opg.innerhtml = i; opb.innerhtml = i; switch(i){ case 100:opb.selected=selected;break; case 200:opg.selected=selected;break; } gs.appendchild(opg); rs.appendchild(opr); bs.appendchild(opb); } setdiv();}function setdiv(){ var font = document.getelementbyid(ctext).value; var dobj = document.getelementbyid(box); dobj.innerhtml=font;}function createdata(){ var font = document.getelementbyid(ctext).value; var r = rs.options[rs.selectedindex].text; var g = gs.options[gs.selectedindex].text; var b = bs.options[bs.selectedindex].text; var type = document.getelementbyid(ctype).value; if(font==||font==undefined){ font=文字不能为空,使用默认文字; document.getelementbyid(ctext).value = font; } colorful('box',font,r,g,b,type);}function colorful(obj,font,r,g,b,type){ var boxobj; if(typeof(obj)==string||typeof(obj)==number){ boxobj = document.getelementbyid(obj); }else{ boxobj = obj; } boxobj.innerhtml=+font+; var num = boxobj.getelementsbytagname(a)[0].scrollwidth; boxobj.innerhtml=; for(var i=0;i<=num;i++){ var j=i+1; var c=math.round(255/num*i); switch(number(type)){ case 0:r=c;g=c;b=c;break; case 1:r=c;break; case 2:g=c;break; case 3:b=c;break; } var iobj = document.createelement(a); iobj.innerhtml=font; iobj.style.clip=rect(auto +j+px auto +i+px); iobj.style.color=rgb(+r+,+g+,+b+); //iobj.href=#; // 生成的文字超链接 boxobj.appendchild(iobj); }}init();